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本 书 共有 两 部 分 。 第 一 部 分 给 出 了 实现 具体 设计 模式 所 需要 的 面向 对 象 特性 的 基础 知识 ， 主 要 包括 接 
口 、 封 装 和 信息 隐藏 、 继 承 、 单 体 模式 等 内 容 。 第 二 部 分 则 专注 于 各 种 具体 的 设计 模式 及 其 在 JavaScript 
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中 的 示例 都 尽 可 能 地 贴近 实际 应 用 ， 书 中 同时 列举 了 一 些 JavaScript 程序 员 最 常见 的 任务 ， 然 后 运用 设计 
模式 使 其 解决 方案 变 得 更 模块 化 、 更 高 效 并 且 更 易 维护 ， 其 中 较为 理论 化 的 例子 则 用 于 阐明 某 些 要 点 。 
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本 书 道 前 人 所 未 道 ， 引 导 你 从 编写 代码 转变 为 设计 代码 。 书 中 绝 大 部 分 示例 代码 都 来 自 YUI 
等 实战 项 目 ， 并 进行 了 深入 剖析 。 强 烈 推 荐 。 

一 一 Nicholas C. Zakas， 著 名 JavaScript 专 家 ，Yahoo 前 端 工程 师 ， 

畅销 书 《JavaScript 高 级 程序 设计 》 作 者 


本 书 绝对 值得 细 细 品读 ， 提 供 了 大 量 有 益 而 且 有 趣 的 JavaScript 实 现代 码 ， 其 中 对 JavaScript 
面向 对 象 特性 的 阐述 是 我 读 过 的 书 中 最 出 色 的 。 
一 一 Jeff Wilcox， 微 软 Silverlight 核 心 程 序 员 


本 书 是 JavaScript 成 熟 的 标志 。 两 位 作者 详细 剖析 了 面向 对 象 实现 的 底层 机 制 ,并 演示 了 在 实 
战 中 如 何 灵 活 运用 设计 模式 ， 获 得 优美 的 设计 方案 。 
一 一 Ti 人 ffFehr，MSNBC.com 用 户 体 验 工程 师 
想 成 为 JavaScript 专 家 ? 本 书 千 万 不 能 错过 ! 
一 一 Amazon.com 读 者 评论 


本 书 介绍 的 技术 将 使 JavaScript 如 虎 添 愤 。 如 果 你 要 用 JavaScript 开 发 较 大 规模 的 程序 ， 本 书 
必 不 可 少 。 
-一 一 JavaRanch.com 
SANS TH, 这 是 我 有 生 以 来 读 到 的 最 好 的 一 本 JavaScript 图 书 。 作者 讲授 了 大 量 专 家 级 的 
经 验 。 
一 一 Mostafa Farghaly， 埃 及 程序 员 


本 书 是 Web 程 序 员 深 刻 理解 各 种 Ajax/JavaScript 框 架 的 宝典 。 
——theopensourcery.com 


对 于 有 一 定 经 验 的 JavaScript 程 序 员 ， 本 书 绝对 物 超 所 值 。 想 知道 Google 和 Yahoo 内 部 怎样 开 
发 企业 级 的 程序 吗 ? 仔细 研读 吧 。 
一 一 James Stewart， 资 深 Web 工 程 师 


本 书 是 市 面 上 最 好 的 一 本 关于 JavaScript 的 书 ， 适 合 想 更 多 地 了 解 JavaScript 和 设计 模式 的 人 。 
一 一 Amazon.com 读 者 评论 


还 在 怀疑 JavaScript 的 强大 ? 本 书 将 使 你 大 开眼 界 。 


——Dzone.com 
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设计 模式 对 于 程序 员 来 说 并 不 是 一 个 陌生 话题 。 在 Erich Gamma 等 人 合 著 的 经 典 著作 《设计 
模式 》 出 版 之 后 ， 十 几 年 间 陆 续 出 现 了 许多 这 方面 的 专著 。 不 过 它们 大 都 结合 Java 和 C++ 等 传统 
的 面向 对 象 语言 进行 讲解 ， 而 讲述 设计 模式 在 动态 语言 中 的 实现 的 书 则 较为 罕见 。 在 早期 的 
JavaScript 编 程 实践 中 ， 这 种 语言 只 被 用 于 做 点 为 网 页 涂 脂 抹 粉 的 小 差事 ; 程序 的 规模 很 小 , 也 很 
简单 。 那 个 时 候 恐 怕 没 有 人 会 想到 把 设计 模式 用 到 这 种 “玩具 语言 ”编写 的 程序 中 。 随 着 Ajax 
技术 的 兴起 ，Web 应 用 的 许多 逻辑 都 从 服务 器 端 转移 到 客户 端 执行 ， 客 户 端 JavaScript 程 序 的 作用 
越 来 越 重要 , 其 规模 和 复杂 程度 也 越 来 越 大 ， 人 们 也 越 来 越 多 地 把 面向 对 象 方法 应 用 到 JavaScript 
程序 设计 中 。 在 此 背景 下 ， 有 许多 人 开始 研究 设计 模式 在 JavaScript 程 序 设 计 中 的 应 用 ,网 上 也 陆 
续 出 现 了 一 些 关 于 这 个 话题 的 零星 讨论 。 但 是 到 目前 为 止 ， 系 统 地 探讨 面向 对 象 的 程序 设计 模式 
在 JavaScript 语 言 中 的 实现 的 书 ， 只 此 一 本 。(Michael Mahemoff 所 著 的 《Ajax 设计 模式 》 一 书 总 
结 的 是 运用 Ajax 技术 开发 Web 应 用 的 各 种 设计 模式 ， 虽 然 也 涉及 大 量 JavaScript 编 程 ， 但 它 与 本 书 
关注 的 焦点 不 同 。 本 书 讨论 的 是 一 些 通用 的 面向 对 象 设计 模式 在 JavaScript 中 的 实现 , 属于 更 基础 
性 的 东西 ， 它 们 不 仅仅 适用 于 Web 客 户 端 编 程 。) 

JavaScript 这 种 语言 与 Java 等 传统 的 面向 对 象 语言 有 很 大 的 不 同 。 它 的 动态 性 、 词 法 作用 域 和 
基于 原型 的 继承 机 制 等 特点 可 能 会 让 很 多 初次 接触 它 的 程序 员 都 有 点 不 习惯 , 而 且 由 于 语言 设计 
上 的 一 些 不 完善 ， 许 多 在 传统 面向 对 象 语言 中 只 是 举 手 之 劳 的 事 在 JavaScipt 中 却 不 得 不 依靠 hack 
手法 来 实现 。 这 也 许 就 是 那些 已 经 熟知 设计 模式 在 Java 等 语言 中 实现 方式 的 程序 员 也 需要 本 书 的 
原因 。 本 书 第 一 部 分 着 重 讲述 了 面向 对 象 技术 在 JavaScript 中 的 实现 方法 。 这 对 于 对 JavaScript 只 
有 过 初步 了 解 的 人 非常 有 用 (当然 ,本 书 不 适合 对 JavaScript 一 穿 不 通 的 读者 。 他 们 应 该 先 找 一 本 
JavaScript 基 础 教材 来 看 看 ， 比 如 和 人民 邮电 出 版 社 出 版 的 《JavaScript 基 础 教程 ))。Java 和 C++ 编程 
老手 们 在 学 完 这 部 分 内 容 之 后 ,想必 应 该 能 够 在 JavaScript 程 序 设 计 中 自行 应 用 各 种 经 典 的 设计 模 
式 了 。 不 过 不 同 的 人 可 能 会 有 一 些 不 同 的 做 法 ， 因 此 继续 看 看 本 书 第 二 部 分 ， 借 鉴 一 下 作者 的 方 
法 也 不 无 益处 .对 于 那些 从 未 学 过 设计 模式 的 JavaScript 程 序 员 来 说 , 本 书 的 重要 性 更 是 毋庸 置疑 
不 过 ， 坦 率 地 说 ， 要 想 深 入 学 习 设计 模式 仅 看 本 书 是 不 够 的 。 取 代 Gamma 等 人 的 《设计 模式 》 并 
不 是 本 书 的 目标 。 

就 个 人 的 感觉 而 言 , 我 觉得 本 书 最 大 的 遗憾 之 处 在 于 作者 在 讲述 各 种 设计 模式 的 实现 时 没有 
使 用 原型 式 继承 , 而 是 选择 了 类 式 继承 。 毕竟 原 型 式 继承 才 是 JavaScript 面 向 对 象 编程 最 自然 的 继 
承 实现 方式 。 不 过 正如 作者 所 言 , “有些 人 似乎 天 生 就 容易 被 原型 式 继承 的 简洁 性 吸引 ， 而 另 一 
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些 人 却 对 更 面 熟 的 类 式 继承 情 有 独 钟 ” 这 只 是 个 人 口味 的 问题 。 考 虑 到 很 多 人 对 原型 式 继承 都 
非常 陌生 ， 作 者 的 这 种 选择 可 以 理解 。 

在 本 书 的 翻译 过 程 中 ， 我 先后 两 次 厚 着 脸皮 向 本 书 的 执行 编辑 杨 爽 女 士 请 求 推迟 交 稿 时 间 ， 
她 总 是 和 颜 悦 色 地 告诉 我 : 多 花 点 时 间 不 要 紧 ， 翻 译 质 量 才 是 最 重要 的 。 在 此 我 要 感谢 杨 爽 女 士 
的 宽容 ， 并 感谢 她 和 本 书 的 文字 编辑 罗 凌 云 女士 认真 负责 的 编辑 工作 。 此 外 ， 李 松 峰 、 贺 师 俊 、 
郭 晓 刚 、 刘 江 、 麦 天 志 、 肖 鹏 、 周 琦 、 崔 驰 坤 、 米 全 喜 、 任 斌 、 霍 泰 稳 、 张 一 宁 和 徐 毅 等 朋友 在 
本 书 的 翻译 过 程 中 曾 提 供 了 许多 宝贵 意见 ， 在 此 我 一 并 表示 感谢 。 由 于 我 的 水 平 有 限 ， 翻 译 不 当 
之 处 在 所 难免 。 谨 请 各 位 读者 朋友 不 音 赐教 。 建 议 您 在 图 灵 公 司 的 网 站 (wwwi.turingbook.com) 
或 互动 出 版 网 (www.china-pub.com) 上 本 书 的 网 页 上 提出 自己 的 意见 。 
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2008 年 秋 
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目前 ，JavaScript 到 了 一 个 转折 关头 。 这 门 语 言 和 它 的 用 户 都 已 经 成 熟 起 来 。 人 们 也 开始 认识 
到 : 它 是 一 个 复杂 的 课题 ， 值 得 进一步 研究 。 

设计 模式 运用 在 程序 设计 中 已 经 有 些 年 头 了 。 它 们 最 早 被 整理 记录 于 Erich Gamma, Richard 
Helm. Ralph Johnson 和 John Vlissides (绰号 “四 人 帮 ”(the Gang of Four， 后 文中 简写 为 Gof)) 
合 著 的 Design Patterns 一 书 中 ,， 现 已 被 应 用 到 各 种 各 样 的 面向 对 象 语言 中 。 设 计 模式 的 魅力 之 一 
体现 在 它们 被 应 用 于 各 种 语言 和 语法 上 时 所 表现 出 的 一 致 性 上 。 其 基本 结构 是 相同 的 ， 只 是 细节 
略 有 差别 。 例 如 ， 把 一 个 用 Java 实 现 的 模式 转换 为 C++ 形式 就 很 容易 。 

但 是 对 JavaScript 来 说 情况 则 有 所 不 同 。 尽 管 所 有 那些 能 力 JavaScript 都 有 ， 但 它们 往往 并 非 
这 种 语言 的 正式 部 分 ， 因 而 必须 借助 于 一 些 星 涩 的 技巧 和 不 那么 直观 的 技术 来 模仿 。 这 些 年 来 ， 
人 们 找到 了 许多 方法 用 该 语言 来 完成 其 设计 者 都 未 曾 预计 到 的 任务 。 那 些 常见 的 面向 对 象 特性 同 
样 也 要 人 靠 这 样 的 手段 实现 。 

本 书 收集 整理 了 这 些 技巧 和 技术 。 第 一 部 分 提供 了 一 个 实现 具体 设计 模式 所 需要 的 面向 对 象 
特性 的 基础 。 第 二 部 分 则 专注 于 各 种 具体 的 设计 模式 及 其 在 JavaScript 语 言 中 的 应 用 。 

为 了 让 每 一 章 中 的 示例 都 尽 可 能 地 贴近 实际 应 用 ， 我 们 花 了 不 少 心思 。 我 们 尽量 列举 一 些 
JavaScript 程 序 员 最 常见 的 任务 , 然后 运用 设计 模式 使 其 解决 方案 变 得 更 模块 化 、 更 高 效 并 且 更 易 
维护 。 而 那些 较为 理论 化 的 例子 则 用 于 阐明 某 些 要 点 。 我 们 知道 ， 本 书 的 价值 最 终 将 取决 于 它 与 
你 的 日 常 工作 和 项 目的 紧密 联系 程度 。 

希望 你 能 喜欢 这 本 书 。JavaScript 是 一 种 极其 复杂 而 又 灵活 的 语言 ， 而 且 很 适合 于 动手 实践 。 
你 可 以 随时 试 试 我 们 提供 的 示例 代码 。 要 是 你 找到 实现 某 种 设计 模式 的 新 方法 , 或 者 某 种 旧 技 术 
的 新 用 途 ， 请 告诉 我 们 一 声 。 本 书 的 附属 网 站 http://jsdesignpatterns.com 和 Apress 出 版 社 的 网 站 
http://www.apress.com 提 供 了 更 多 信息 以 及 可 供 下 载 的 示例 代码 。 


目标 读者 
本 书 主要 面向 两 类 读者 。 第 一 类 读者 是 懂 一 点 JavaScript 并 且 想 要 加 深 对 它 的 认识 的 Web 开 发 


人 员 或 前 端 工程 师 , 尤其 是 那些 想 要 增进 其 对 于 JavaScript 的 面向 对 象 能 力 的 理解 , 学 习 如 何 提 高 
其 代码 的 模块 化 程度 、 可 维护 性 和 效率 的 人 , 他 们 可 以 从 书 中 学 到 用 JavaScript 进 行 面向 对 象 程序 


© 中 文 版 名 为 《设计 模式 一 一 可 复 用 面向 对 象 软件 的 基础 》( 机 械 工业 出 版 社 ，2004)。 一 一 译 者 注 
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设计 的 基本 知识 ， 还 能 学 到 各 种 具体 的 设计 模式 ， 懂 得 应 该 在 什么 场合 使 用 这 些 设 计 模 式 ， 以 及 
如 何 实现 它们 。 这 类 读者 已 经 比较 熟悉 JavaScript 的 基本 语法 , 他 们 会 更 多 地 关注 那些 关于 如 何 按 
特定 设计 模式 重 构 现 有 代码 的 部 分 ， 以 及 对 于 每 种 模式 的 适用 场合 的 说 明 。 

第 二 类 读者 是 一 些 主要 使 用 Java 和 C++ 等 服务 器 端 编程 语言 的 程序 员 ， 相 对 而 言 ， 他 们 对 
JavaScript 比 较 陌生 ,但 又 希望 能 把 自己 在 设计 模式 和 面向 对 象 程序 设计 方面 的 知识 应 用 到 客户 端 
程序 设计 中 。 他们 可 以 从 本 书 中 学 到 如 何在 JavaScript 中 实现 接口 、 继承 和 封装 等 常见 的 面向 对 象 
特性 。 这 类 读者 会 发 现 书 中 的 代码 尤其 有 用 , 因为 他 们 可 能 不 太 熟 悉 JavaScript 和 其 他 面向 对 象 语 
言 在 语法 方面 的 差别 。 也 许 他 们 对 各 种 具体 的 设计 模式 已 经 比较 熟悉 ,所 以 本 书 讲述 面向 对 象 技 
术 在 JavaScript 中 的 实现 方法 的 第 一 部 分 对 他 们 可 能 更 有 意义 。 

那些 对 JavaScript 和 面向 对 象 程序 设计 都 不 太 熟 悉 的 读者 可 能 很 难看 懂 某 些 示 例 中 的 代码 。 这 
并 不 是 一 本 入 门 级 的 书 ， 它 假定 读者 已 经 具备 一 定 的 程序 设计 知识 。 尽 管 如 此 ， 我 们 还 是 尽 可 能 
地 使 自己 的 讲解 做 到 深入 浅 出 ， 让 不 同 层次 的 读者 都 易于 理解 。 


本 书 结构 


本 书 分 为 两 部 分 。 第 一 部 分 讲述 JavaScript 面 向 对 象 程序 设计 的 基础 知识 , 其 中 的 各 章 应 该 按 
顺序 阅读 。 每 一 章 都 建立 在 前 面 一 章 的 基础 上 ， 并 且 假 定 你 已 经 读 过 之 前 的 各 章 。 读 者 最 好 先 通 
读 这 一 部 分 的 所 有 章节 ， 因 为 第 二 部 分 的 各 章 都 要 用 到 第 一 部 分 讲述 的 技术 ， 而 且 有 时 不 会 再 加 
以 说 明 。 

第 二 部 分 讲述 具体 的 设计 模式 及 其 在 JavaScript 中 的 实际 应 用 , 其 中 的 各 章 可 以 按 任意 顺序 阅 
读 。 有 些 章 引用 了 其 他 章 的 内 容 ， 被 引用 的 内 容 既 有 第 一 部 分 的 ， 也 有 第 二 部 分 的 ， 我 们 都 给 出 
了 引文 的 章 号 。 


第 一 部 分 


第 1 章 ( 富有 表现 力 的 JavaScript ) 揭示 了 JavaScript 语 言 富 有 表现 力 的 特点 。 从 中 你 可 以 体 
会 到 , 这 种 语言 允许 你 用 各 种 各 样 的 编程 风格 来 完成 同样 的 任务 , 还 允许 你 在 面向 对 象 编程 的 过 
程 中 借用 函数 式 编程 的 概念 来 丰富 其 实现 方式 。 这 一 章 解 释 了 究竟 为 什么 应 该 使 用 设计 模式 ， 以 
及 它们 在 JavaScript 程 序 设计 中 的 运用 是 如 何 使 代码 更 高 效 、 更 易于 处 理 的 。 

第 2 章 (HO) 分 析 了 其 他 面向 对 象 语言 实现 接口 的 方式 ， 并 用 JavaScript 对 它们 在 这 方面 的 
最 佳 特性 进行 了 模仿 。 文 中 探讨 了 接口 检查 的 各 种 可 行 方式 ， 并 给 出 了 一 个 可 用 来 检查 对 象 是 否 
具有 必要 方法 的 可 重用 的 类 。 

第 3 章 ( 封装 和 信息 隐藏 ) 探讨 了 在 JavaScript 中 创建 对 象 的 各 种 不 同方 式 ， 以 及 每 种 方式 中 
用 以 创建 公用 (public)、 私 用 (private) 和 受 护 (protected) 方法 ?的 可 行 技术 。 文 中 还 对 经 过 复 
杂 封 装 的 对 象 的 适用 场合 进行 了 讨论 。 


(D JavaScript 并 不 像 许多 面向 对 象 语言 那样 提供 public、private 和 protected 关 键 字 及 相关 的 特性 。 第 3 章 中 用 一 些 技术 
模仿 了 其 他 语言 对 public 成 员 和 private 成 员 的 实现 ， 但 没有 模仿 protected 成 员 的 实现 。 一 一 译 者 注 
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第 4 章 ( 继承 ) 讲述 了 在 JavaScript 中 用 以 创建 子 类 的 各 种 技术 。 其 中 既 讲 了 类 式 继承 ， 也 讲 
了 原型 式 继 承 ， 还 说 明了 它们 各 自 的 适用 场合 。 文 中 还 讲述 了 掺 元 类 (mixin class) 2， 以 及 如 何 
用 它 替 代 多 亲 继 承 (multiple inheritance) 2 。 

第 5 章 ( 单 体 模式 ) 讨论 了 JavaScript 中 的 单 体 模 式 、 命 名 空间 、 代 码 组 织 ， 以 及 可 以 用 来 根 
据 运行 时 环境 动态 定义 方法 的 分 支 技术 (branching)。 其 中 还 谈 到 了 工厂 模式 等 可 以 受益 于 单 体 
的 模式 。 

第 6 章 ( 方法 的 链 式 调用 ) 考察 了 JavaScript 对 方法 进行 链 式 调用 的 能 力 ， 以 及 这 种 做 法 为 什 
么 能 得 到 更 清晰 、 简 练 的 代码 。 文 中 用 这 种 技术 创建 了 一 个 小 小 的 JavaScript 库 ， 并 把 其 中 的 方法 
和 没有 利用 链 式 调用 技术 实现 的 对 应 方法 进行 了 比较 。 


第 二 部 分 


第 7 章 ( 工厂 模式 ) 讨论 工厂 模式 。 这 种 模式 有 助 于 消除 那些 彼此 实例 化 对 方 的 类 之 间 的 耦 
合 ， 并 改 而 用 一 个 方法 来 确定 要 实例 化 哪个 类 。 文 中 既 讨 论 了 另外 用 一 个 类 (通常 是 一 个 单 体 ) 
来 生成 实例 的 简单 工厂 模式 , 也 讨论 了 用 子 类 来 确定 一 个 成 员 对 象 应 该 是 哪 种 具体 类 实例 的 较 复 
杂 的 工厂 模式 。 

BOR ( 桥接 模式 ) 讨论 了 一 种 既 能 把 两 个 对 象 连接 在 一 起 ， 又 能 避免 二 者 间 的 强 耦 合 的 方 
法 。 桥 接 元 素 把 两 个 对 象 连接 起 来 ,同时 又 允许 它们 独立 变化 。 文 中 演示 了 如 何 用 桥接 元 素 把 函 
数 松散 地 绑 定 到 事件 。 这 一 章 还 创建 了 一 个 异步 连接 队列 ,用 以 示范 桥接 模式 在 保持 代码 的 简洁 
性 方面 的 作用 。 

第 9 章 (MARX) 讨论 了 一 种 非常 适合 于 创建 Web 上 的 动态 用 户 界面 的 设计 模式 : 组 合 模 
式 。 文 中 演示 了 如 何 使 用 这 种 模式 来 达到 只 用 一 条 命令 即 可 在 许多 对 象 上 激发 复杂 或 递归 性 的 行 
为 的 目的 ， 以 及 如 何 用 它 把 一 系列 对 象 组 织 为 复杂 的 层次 体系 〈hierarchy)。 文 中 还 逐一 说 明了 
实现 组 合 模式 所 必 经 的 一 系列 步 又， 并 讨论 了 该 模式 的 适用 场合 。 

第 10 章 ( 门面 模式 ) 讨论 了 一 种 用 来 为 对 象 创建 一 个 更 完善 的 接口 的 方法 。 门 面 模式 可 以 用 
来 把 现 有 接口 转换 为 一 个 更 便于 使 用 的 接口 。 文 中 解释 了 为 什么 大 多 数 JavaScript 库 都 是 为 这 种 语 
言 在 具体 浏览 器 中 的 实现 提供 的 一 个 门面 。 这 一 章 也 显示 了 如 何 用 这 种 模式 创建 便利 方法 和 事件 
工具 库 。 

第 11 章 ( 适配器 模式 ) 讨论 了 一 种 可 以 让 现 有 接口 模 合 实际 需要 的 模式 。 适 配器 也 称 包 装 器 
(wrapper)， 用 来 把 不 匹配 的 接口 替换 为 一 个 可 用 于 现 有 系统 中 的 接口 。 文 中 探讨 了 如 何 用 适 配 
器 弥合 JavaScript 库 间 的 差异 并 简化 从 一 种 库 过 渡 到 另 一 种 库 的 过 程 。 其 中 考察 了 一 个 电子 邮件 
API， 并 创建 了 一 个 有 助 于 升级 到 新 版 本 的 适配器 。 

第 12 章 ( 装饰 者 模式 ) 讨论 了 一 种 可 以 为 对 象 添加 特性 而 又 不 必 创建 新 的 子 类 的 方法 。 装 饰 
者 模式 用 于 把 对 象 透 明 地 包装 到 另 一 种 具有 相同 接口 的 对 象 中 。 这 一 章 考 察 了 装饰 者 的 结构 以 及 


O 也 译 为 “混入 类 ”。 一 一 译 者 注 
© 也 译 “ 多 重 继承 ”， 但 感觉 不 够 准确 。 
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用 装饰 者 模式 动态 实现 接口 。 

第 13 章 ( 享 元 模式 ) 讨论 了 另 一 种 用 于 优化 目的 的 模式 : 享 元 模式 。 文 中 示范 了 如 何 通 过 把 
大 批 独立 对 象 转变 为 少量 共享 对 象 ， 从 而 大 幅 削 减 实现 应 用 软件 所 需 的 对 象 数 目 。 这 一 章 还 创建 
了 一 个 Web 日 历 和 一 个 可 重用 的 工具 提示 类 ， 以 示范 如 何 按 享 元 模式 对 类 进行 重 构 。 

第 14 章 ( 代理 模式 ) 讨论 了 可 用 于 控制 对 对 象 的 访问 的 代理 模式 。 文 中 显示 了 如 何 为 本 体 
(real subject) 2 创建 一 个 代理 对 象 以 作为 其 替身 ， 并 使 其 能 被 远程 访问 ， 还 探讨 了 代理 模式 的 种 
种 用 法 ， 其 中 包括 推迟 对 其 创建 需要 耗 用 大 量 计算 资源 的 类 的 实例 化 。 这 一 章 还 创建 了 一 个 可 用 
来 推迟 任何 类 的 加 载 的 通用 类 。 

第 15 章 ( 观察 者 模式 ) 讨论 了 一 种 对 对 象 的 状态 进行 观察 ， 并 且 当 它 发 生变 化 时 能 得 到 通知 
的 方法 。 观 察 者 模式 也 称 发 布 者 -订阅 者 模式 (publisher-subscriber pattern)， 用 于 让 对 象 对 事件 
进行 监听 以 便 对 其 作出 响应 。 文 中 以 报 业 为 例 说 明了 观察 者 模式 的 各 种 运作 方式 ,还 讨论 了 在 使 
用 一 个 动画 库 时 可 以 订阅 的 各 种 事件 。 

第 16 章 ( 命令 模式 ) 讨论 了 一 种 对 方法 调用 进行 封装 的 方式 。 借 助 命令 模式 ， 可 以 对 方法 调 
用 进行 参数 化 和 传递 ， 然 后 在 需要 的 时 候 再 加 以 执行 。 文 中 说 明了 这 种 模式 的 各 种 应 用 场合 ， 

中 包 插 创建 用 户 界面 一 一 尤其 是 那 种 需要 不 受 限 制 的 取消 操作 的 用 户 界 面 。 这 一 章 还 讨论 了 命令 
模式 的 结构 ， 并 提供 了 几 个 示范 其 在 JavaScript 中 的 用 法 的 实际 例子 。 

第 17 章 ( 职责 链 模式 ) 讨论 了 用 来 消除 请 求 的 发 送 者 和 接收 者 之 间 的 看 合 的 职责 链 模式 。 文 
中 说 明了 在 JavaScript 中 如 何 用 这 种 模式 处 理事 件 的 捕获 和 冒 泡 , 如 何 创建 弱 耦 合 模块 和 优化 事件 
监听 器 的 绑 定 。 


预备 知识 


为 了 使 书 中 的 代码 示例 更 加 清晰 、 目 标 更 加 明确 , 我们 使 用 了 一 些 便利 函数 来 执行 安装 事件 
监听 器 、 派 生子 类 、 处 理 Cookie、 引 用 HTML 元 素 等 任务 。 我 们 没有 使 用 YUI 或 jQuery 等 库 所 提 
供 的 类 似 功 能 ， 其 目的 在 于 避免 让 我 们 的 代码 依赖 于 其 他 库 ， 以 便 读 者 可 以 将 其 与 自己 喜欢 的 任 
何 库 结合 使 用 。 各 种 主流 JavaScript 库 都 有 与 我 们 使 用 的 函数 相对 应 的 函数 。 这 些 便 利 函数 的 完整 
代码 可 以 从 本 书 的 网 站 http://jsdesignpatterns.com 和 Apress 出 版 社 的 网 站 http://www.apress.com 下 
载 。 下 面 是 这 些 函 数 的 简要 说 明 。 
口 $(id), 根据 ID 值 获取 HTML 元 素 的 引用 。 其 参数 可 以 是 字符 串 ， 也 可 以 是 字符 串 的 数组 。 
G addEvent(obj, type，func)， 把 函数 func 作 为 元 素 obj 的 事件 监听 器 。type 表 示 该 函数 所 
要 监听 的 事件 。 

口 addLoadEvent(func)， 将 函数 func 关 联 到 window 对 象 的 1oad 事 件 。 

口 getElementsByC1ass(searchClass，node， tag)， 获 取 所 有 cl1ass 属 性 值 为 searchCl1ass 的 元 
素 的 引用 。node 和 tag 这 两 个 参数 可 有 可 无 ， 它 们 可 以 用 来 缩小 搜索 范围 。 函 数 的 返回 值 


O 也 译 为 “实体 ”或 “主体 ”。 一 一 详 者 注 
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是 一 个 数组 。 
口 insertAfter(parent, node, referenceNode)， 插 入 元 素 node， 其 父 元 素 为 parent， 其 位 置 
在 referenceNode 之 后 。 | 


口 getCookie(name)， 获 取 与 名 为 name 的 Cookie 相 关联 的 字符 串 。 
口 setCookie(name，value，expires，path，domain，secure)， 把 与 名 为 name 的 Cookie 相 关 


联 的 字符 串 设 置 为 value。 除 name 和 value 外 的 其 他 参数 均 可 有 可 无 。 
口 deleteCookie(name)， 将 名 为 name 的 Cookie 的 过 期 时 间 设 置 到 过 去 。® 
口 cl1one(object)， 创 建 object 的 一 个 副本 。 用 于 原型 式 继承 。 见 第 4 章 。 
Q extend(subClass, superClass), 执行 一 些 必 要 的 工作 , 使 subClass 成 为 SuperClass 的 子 类 。 


见 第 4 章 。 
Q augment(receivingClass,，givingClass)， 将 givingClass 中 的 方法 输入 receivingC1ass 中 。 


见 第 4 章 。 


下 载 代码 
本 书 的 附属 网 站 http:Wjsdesignpatterns.com 和 Apress 出 版 社 的 网 站 http:/www.apress.com 都 有 
zip 文 件 格式 的 示例 代码 供 下 载 。” 


联系 作者 


你 可 以 通过 dustin@jsdesignpatterns.com 和 ross(@jsdesignpatterns.com 与 作者 联系 。 
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A ei A JavaScript 


MF les, prelates \、 应 用 最 广泛 的 语言 之 一 。 由 于 所 有 现代 浏览 器 都 嵌入 了 JavaScript 
解释 器 ， 所 以 在 大 多 数 地 方 都 能 见 到 其 身影 。 作 为 一 种 语言 ， 它 在 我 们 的 日 常生 活 中 起 

者 非常 重要 的 作用 ， 支 持 着 我 们 访问 的 网 站 ， 帮 助 Web 呈 现 出 多 姿 多 彩 的 界面 。 

那 为 什么 有 些 人 还 把 它 看 作 一 种 玩具 式 的 语言 , 认为 它 不 值得 职业 程序 员 关 注 呢 ? 我 们 认为 
其 原因 在 于 ， 人 们 没有 认 清 这 种 语言 的 全 部 能 力 及 其 在 当今 的 编程 世界 中 的 独特 性 。 JavaScript 
是 一 种 极 富 表现 力 的 语言 ， 它 具有 一 些 C 家 族 语言 所 罕见 的 特性 。 

本 章 将 探讨 一 些 令 JavaScript 如 此 富有 表现 力 的 特性 。 从 中 你 可 以 体会 到 , 这 种 语言 允许 你 用 
各 种 方式 完成 同样 的 任务 , 还 允许 你 在 面向 对 象 编程 的 过 程 中 借用 函数 式 编程 中 的 概念 来 丰富 其 
实现 方式 。 本章 解释 了 究竟 为 什么 应 该 使 用 设计 模式 , 以 及 它们 在 JavaScript 程 序 设计 的 运用 是 如 
何 使 代码 更 高 效 、 更 易于 处 理 的 。 


1.1 JavaScript 的 灵活 性 


是 re 作为 JavaScript 程 序 员 ， 只 要 你 愿意 ， 可 以 把 程序 写 得 
言 也 支持 多 种 不 同 的 编程 风格 ， 你 既 可 以 采用 函数 式 编程 风 
”岂可 以 编程 风格 。 即 使 你 根本 不 懂 函 数 式 编程 或 面向 对 象 编程 ， 
ES MERATE EA, 哪怕 只 采用 编写 一 个 个 简单 的 函数 的 方式 ， 你 也 能 高 
可 能 贡生 人 把 JavaSeript 视 同 玩具 的 原因 之 一 ， 但 我 们 却 认 为 这 是 一 个 优点 。 
AEE Bre: KAA. 易于 学 习 的 子 集 就 能 完成 一 些 有 用 的 任务 . 这 也 意味 着 
st Bie © uid re apr ole we: 
JavaScript 允 许 你 模仿 其 他 语言 的 编程 模式 和 惯用 法 。 它 也 形成 了 自己 的 一 些 编程 模式 和 惯用 
法 。 那 些 较为 传统 的 服务 器 端 编程 语言 具有 的 面向 对 象 特 性 ，JavaScript 都 有 。 
先 来 看 一 个 用 不 同方 法 完成 同样 的 任务 的 例子 : 启动 和 停止 一 个 动画 。 如 果 你 看 不 懂 这 些 例 
子 ， 别 担心 。 我 们 在 此 使 用 的 所 有 模式 和 技术 都 会 在 本 书后 面 进行 讲解 。 目 前 你 可 以 把 这 一 部 分 
看 作 一 个 演示 在 JavaScript 中 用 不 同方 法 完成 同一 任务 的 实际 例子 。 
如 果 你 习惯 于 过 程式 的 程序 设计 ， 那 么 可 以 这 样 做 ; 
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1.1 JavaScript 的 灵活 性 3 
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/* Start and stop animations using functions. */ 
function startAnimation() { 

; ; 

function stopAnimation() { 


ra 
这 种 做 法 很 简单 , 但 你 无 法 创建 可 以 保存 状态 并 且 具 有 一 些 仅 对 其 内 部 状态 进行 操作 的 方法 
的 动画 对 象 。 下 面 的 代码 定义 了 一 个 类 ， 你 可 以 用 它 创建 这 种 对 象 ， 


/* Anim class. */ 
var Anim = function() { 


}; 
Anim.prototype.start = function() { 


}; 
Anim.prototype.stop = function() { 


}; 
/* Usage. */ 


var myAnim = new Anim(); 
myAnim.start(); 


myAnin.stop(); 
上 述 代码 定义 了 一 个 名 为 Anim 的 类 ， 并 把 两 个 方法 赋 给 该 类 的 prototype 属 性 。 第 3 章 将 详细 
讲述 这 种 技术 。 如 果 你 更 喜欢 把 类 的 定义 封装 在 一 条 声明 中 ， 则 可 改 用 下 面 的 代码 ; 


/* Anim class, with a slightly different syntax for declaring methods. */ 
var Anim = function() { 


} 
Anim. prototype = { 
start: function() { 


}, 

stop: function() { 

is 
}; [a] 
这 在 传统 的 面向 对 象 程序 员 看 来 可 能 更 眼熟 一 点 ， 他 们 习惯 于 看 到 类 的 方法 声明 内 妊 在 类 的 
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4 第 1 章 富有 表现 力 的 JavaScript 


声明 之 中 。 要 是 你 以 前 用 过 这 样 的 编程 风格 ， 可 能 想 尝 试 一 下 下 面 的 示例 。 同 样 ， 如 果 代码 中 有 
些 地 方 你 看 不 民 ， 不 必 为 此 而 焦虑 : 
/* Add a method to the Function object that can be used to declare methods. */ 
Function.prototype.method = function(name, fn) { 


this.prototype[name] = fn; 


3 
/* Anim class, with methods created using a convenience method. */ 


var Anim = function() { 


}; 
Anim.method('start', function() { 


Di 

Anim.method('stop’, function() { 

Di 

Function.prototype.method 用 于 为 类 添加 新 方法 。 它 有 两 个 参数 。 第 一 个 是 字符 串 ， 表 示 新 
方法 的 名 称 ; 第 二 个 是 用 作 新 方法 的 函数 。 

你 可 以 进一步 修改 Function.prototype.method， 使 其 可 被 链 式 调用 。 这 只 需要 让 它 返 回 this 
值 即 可 (方法 的 链 式 调用 技术 将 在 第 6 章 中 讲述 ): 

/* This version allows the calls to be chained. */ 

Function.prototype.method = function(name, fn) { 

this.prototype[name] = fn; 


return this; 


}; 
/* Anim class, with methods created using a convenience method and chaining. */ 


var Anim = function() { 


}; 
Anim. 
method('start', function() { 


}). 
method('stop', function() { 
}); 
你 已 经 见识 了 完成 同一 项 任务 的 5 种 不 同方 法 ， 它 们 的 风格 略 有 差异 。 基 于 自己 的 编程 背景 ， 
你 可 能 觉得 其 中 的 某 种 方法 比 别 的 方法 更 为 合意 。 这 是 件 好 事 : JavaScript 允 许 你 用 最 适合 于 手头 
项 目的 编程 风格 进行 工作 。 不 同 的 风格 在 代码 篇 幅 、 编 码 效率 和 执行 性 能 方面 各 有 其 特点 。 本 书 
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13 ”函数 是 一 等 对 象 5 


的 第 一 部 分 将 讨论 所 有 这 些 风 格 。 


1.2” 弱 类 型 语言 


在 JavaScript 中 ,定义 变量 时 不 必 声 明 其 类 型 。 但 这 并 不 意味 着 变量 没有 类 型 。 一 个 变量 可 以 
属于 几 种 类 型 之 一 ， 这 取决 于 其 包含 的 数据 。JavaScript 中 有 3 种 原始 类 型 : 布尔 型 、 数 值 型 和 字 
符 串 类 型 〈 不 区 分 整数 和 浮 点 数 是 JavaScript 与 大 多 数 其 他 主流 语言 的 一 个 不 同 之 处 )。 此 外 ， 还 
有 对 象 类 型 和 包含 可 执行 代码 的 函数 类 型 ， 前 者 是 一 种 复合 数据 类 型 〈 数 组 是 一 种 特殊 的 对 象 ， 
它 包 含 着 一 批 值 的 有 序 集合 )。 最 后 ， 还 有 空 类 型 (null) 和 未 定义 类 型 (undefined) 这 两 种 数 
据 类 型 。 原 始 数据 类 型 按 值 传送 ， 而 其 他 数据 类 型 则 按 引 用 传送 。 如 果 不 了 解 这 一 点 的 话 ， 你 很 
可 能 会 碰 到 一 些 意 想 不 到 的 问题 。 

与 其 他 弱 类 型 语言 一 样 , JavaScript 中 的 变量 可 以 根据 所 赋 的 值 改变 类 型 。 原始 类 型 之 间 也 可 
以 进行 类 型 转换 。toString 方 法 可 以 把 数值 或 布尔 值 转变 为 字符 串 。parseF1oat 和 parseInt 函 数 
可 以 把 字符 串 转变 为 数值 。 双 重 “ 非 ”操作 可 以 把 字符 串 或 数值 转变 为 布尔 值 : 


var bool = !!num; 


弱 类 型 的 变量 带 来 了 极 大 的 灵活 性 。 因 为 JavaScript 会 根据 需要 进行 类 型 转换 ,所 以 一 般 说 来 ， 
你 不 用 为 类 型 错误 操心 。 


1.3 ”函数 是 一 等 对 象 


在 JavaScript 中 ， 函 数 是 一 等 对 象 。 它 们 可 以 存储 在 变量 中 ， 可 以 作为 参数 传 给 其 他 函数 ， 可 
以 作为 返回 值 从 其 他 函数 传 出 ， 还 可 以 在 运行 时 进行 构造 。 在 与 函数 打交道 时 ， 这 些 特 性 带 来 了 
极 大 的 灵活 性 和 极 强 的 表达 能 力 。 在 阅读 本 书 时 你 会 体会 到 ， 这 正 是 用 以 构建 传统 的 面向 对 象 杠 
架 的 基础 。 

可 以 用 function() { ...} 这 样 的 语法 创建 匿名 函数 。 它 们 没有 函数 名 ， 但 可 以 被 赋 给 变量 。 
下 面 是 一 个 匿名 函数 的 示例 ; 


/* An anonymous function, executed immediately. */ 


(function() { 
var foo = 10; 
var bar = 2; 
alert(foo * bar); 
HO; 
这 个 函数 在 定义 之 后 便 立 即 执行 ， 甚 至 不 用 赋 给 一 个 变量 。 出 现在 函数 声明 之 后 的 一 对 括号 
立即 对 函数 进行 了 调用 。 括 号 中 空 无 一 物 ， 但 也 并 不 是 非得 如 此 : 


/* An anonymous function with arguments. */ 
(function(foo, bar) { 


alert(foo * bar); 


})(20, 2); 
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这 个 匿名 函数 与 前 一 个 等 价 ， 只 不 过 变量 没有 在 函数 内 部 用 var 声 明 ， 而 是 作为 参数 从 外 部 
传 入 而 已 。 这 个 函数 也 可 以 返回 一 个 值 。 这 个 返回 值 可 以 被 赋 给 一 个 变量 : 

/* An anonymous function that returns a value. */ 

var baz = (function(foo, bar) { 


return foo * bar; 


})(10, 2); 


// baz will equal 20. 

匿名 函数 最 有 趣 的 用 途 是 用 来 创建 闭 包 。 闭 包 〈closure) 是 一 个 受到 保护 的 变量 空间 ， 由 内 
He PR AAEM. JavaScript A A Ph AR AY VE A Sa. 这 意味 着 定义 在 函数 内 部 的 变量 在 函数 外 部 不 能 被 
访问 。JavaScript 的 作用 域 又 是 词法 性 质 的 (lexically scoped)。 这 意味 着 函数 运行 在 定义 它 的 作用 
域 中 ， 而 不 是 在 调用 它 的 作用 域 中 。 把 这 两 个 因素 结合 起 来 ， 就 能 通过 把 变量 包 囊 在 匿名 函数 中 
而 对 其 加 以 保护 。 你 可 以 这 样 创建 类 的 私 用 (private〉 变 量 : 


/* An anonymous function used as a closure. */ 
var baz; 


(function() { 
var foo = 10; 
var bar = 2; 
baz = function() { 
return foo * bar; 
}; 
HO; 
baz(); // baz can access foo and bar, even though it is executed outside of the 
// anonymous function. 


变量 foo 和 bar 定 义 在 匿名 函数 中 。 因 为 函数 baz 定 义 在 这 个 闭 包 中 ， 所 以 它 能 访问 这 两 个 变 
量 ， 即 使 是 在 该 闭 包 执行 结束 后 。 这 是 一 个 复杂 的 话题 ， 本 书 中 会 多 次 涉及 。 在 第 3 章 讨 论 封装 
的 时 候 将 对 这 种 技术 详 加 讲解 。 


1.4 对象 的 易 变 性 


在 JavaScript 中 ， 一切 都 是 对 象 (除了 那 三 种 原始 数据 类 型 。 即 便 是 这 些 类 型 ,在 必要 的 时 候 
也 会 被 自动 包装 为 对 象 )， 而 且 所 有 对 和 象 都 是 易 变 的 (mutable)。 这 意味 着 你 能 使 用 一 些 在 大 多 
数 别 的 语言 中 不 允许 的 技术 ， 例 如 为 函数 添加 属性 : 


function displayError(message) { 
displayError.numTimesExecuted++; 
alert (message) ; 


3 
displayError.numTimesExecuted = 0; 


这 也 意味 着 你 可 以 对 先前 定义 的 类 和 实例 化 的 对 象 进行 修改 : 
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/* Class Person. */ 


function Person(name, age) { 
this.name = name; 
this.age = age; 


Person.prototype = { 
getName: function() { 
return this.name; 


}, 
getAge: function() { 
return this.age; 
} 
} 


/* Instantiate the class. */ 


var alice = new Person( ‘Alice’, 93); 
var bill = new Person('Bill', 30); 


/* Modify the class. */ 


Person.prototype.getGreeting = function() { 
return "Hi ' + this.getName() + ‘!'; 


}; 
/* Modify a specific instance. */ 


alice.displayGreeting = function() { 
alert(this.getGreeting()); 
} 


在 这 个 例子 中 ， 类 的 getGreeting 方 法 是 在 已 经 创建 了 类 的 两 个 实例 之 后 才 添加 的 ， 但 这 两 
个 实例 仍然 能 获得 这 个 方法 ， 其 原因 在 于 prototype 对 象 的 工作 机 制 。 对 象 al1ice 还 得 到 了 
displayGreeting 方 法 ， 而 别 的 实例 却 没有 。 

与 对 象 的 易 变性 相关 的 还 有 内 省 〈introspection) 的 概念 。 你 可 以 在 运行 时 检查 对 象 所 具有 的 
属性 和 方法 ， 还 可 以 使 用 这 种 信息 动态 实例 化 类 和 执行 其 方法 (这 种 技术 称 为 反射 (reflection))， 
甚至 不 需要 在 开发 时 知道 它们 的 名 称 。 这 些 技术 在 动态 脚本 编程 中 发 挥 着 重要 作用 ， 而 静态 语言 
(例如 C++) 则 缺乏 这 样 的 特性 。 

本 书 中 大 多 数 用 来 模仿 传统 的 面向 对 象 特性 的 技术 都 依赖 于 对 象 的 易 变性 和 反射 。 如 果 你 习 
惯 使 用 C++ 或 Java 这 类 语言 ， 可 能 会 觉得 这 很 奇怪 ， 因 为 在 那些 语言 中 ， 不 能 对 已 经 实例 化 的 对 
象 进行 扩展 ， 也 不 能 对 已 经 定义 好 的 类 进行 修改 。 而 在 JavaScript 中 , 任何 东西 都 可 以 在 运行 时 修 
改 。 这 是 一 个 强 有 力 的 工具 ,许多 在 别 的 语言 中 无 法 办 到 的 事 都 能 借助 于 它 而 办 到 。 当 然 ， 这 也 
有 其 不 利之 处 。 你 可 以 定义 一 个 具有 一 套 方法 的 类 ， 却 不 能 肯定 这 些 方法 在 以 后 总 是 完好 如 初 。 
这 是 JavaScript 中 很 少 进行 类 型 检查 的 原因 之 一 。 这 个 问题 将 在 第 2 章 讲 述 鸭 式 辩 型 (duck typing) 
和 接口 检查 时 进行 探讨 。 


www.TopSage.com 


8 第 1 章 富有 表现 力 的 JavaScript 


1.5 ”继承 


继承 在 JavaScript 中 不 像 在 别 的 面向 对 象 语言 中 那样 简单 JavaScript 使 用 的 是 基于 对 象 的 [ 原 
型 式 〈prototypal)) 继承 ， 它 可 以 用 来 模仿 基于 类 的 (类 式 〈classical)) 继承。 这 两 种 范 型 本 书 
都 会 讲述 , 编写 代码 时 用 哪 一 种 都 行 , 根据 手头 任务 的 实际 情况 , 有 时 其 中 的 某 种 会 更 适合 一 些 。 
它们 在 性 能 上 也 有 不 同 的 表现 , 这 也 是 在 进行 选择 时 需要 考虑 的 重要 因素 。 这 个 复杂 的 话题 将 在 
第 4 章 中 进行 探讨 。 


1.6 JavaScript 中 的 设计 模式 


1995 年 ，GoF 合 作出 版 了 一 本 名 为 《设计 模式 》 的 书 。 这 本 书 整理 记录 了 对 象 间 相 互 作用 的 
各 种 方式 ， 并 针对 不 同类 型 的 对 象 创造 了 一 套 通用 术语 。 用 以 创建 这 些 不 同类 型 的 对 象 的 套路 被 
称 为 设计 模式 (design pattermn )。 出 于 通用 性 的 考虑 ， 书 中 使 用 了 一 种 在 一 定 程度 上 独立 于 语言 的 
方式 来 描述 这 些 模式 。 本 书 就 是 专门 讨论 这 些 模式 在 JavaScript 中 的 应 用 的 。 

JavaScript 强 大 的 表现 力 赋予 了 程序 员 在 运用 设计 模式 编写 代码 时 极 夫 的 创造 性 。 在 
JavaScript 中 使 用 设计 模式 主要 有 如 下 3 原因 。 

(1) 可 维护 性 。 设 计 模 式 有 助 于 降低 模块 间 的 耦合 程度 。 这 使 对 代码 进行 重 构 和 换 用 不 同 的 
模块 变 得 更 容易 ， 也 使 程序 员 在 大 型 团队 中 的 工作 以 及 与 其 他 程序 员 的 合作 变 得 更 容易 。 

(2) 沟通 。 设 计 模式 为 处 理 不 同类 型 的 对 象 提供 了 一 套 通用 的 术语 。 程 序 员 因 此 可 以 更 简明 
地 描述 自己 的 系统 的 工作 方式 。 你 不 用 进行 元 长 的 说 明 ， 往 往 这 样 一 句 话 就 足够 了 :“ 它 使 用 了 
工厂 模式 ”。 每 个 模式 都 有 自己 的 名 称 ， 这 意味 着 你 可 以 在 较 高 层面 上 对 其 进行 讨论 ， 而 不 必 涉 
足 过 多 的 细节 。 

(3) 性 能 。 本 书 讲述 的 某 些 模式 是 起 优化 作用 的 模式 。 它 们 可 以 大 幅 提高 程序 的 运行 速度 ， 
并 减少 需要 传送 到 客户 端的 代码 量 。 这 方面 最 重要 的 例子 是 享 元 模式 (第 13 章 ) 和 代理 模式 (第 
14 章 )。 

你 也 可 能 出 于 如 下 两 个 理由 而 不 使 用 设计 模式 。 

(1) 复杂 性 。 获 得 可 维护 性 往往 要 付出 代价 ， 那 就 是 代码 可 能 会 变 得 更 加 复杂 、 更 难 被 程序 
设计 新 手 理解 。 

(2) 性 能 。 尽 管 某 些 模式 能 提升 性 能 ， 但 多 数 模 式 对 代码 的 性 能 都 有 所 拖累 。 这 种 拖累 可 能 
微不足道 ， 也 可 能 完全 不 能 接受 ， 这 取决 于 项 目的 具体 需求 。 

实现 设计 模式 比较 容易 ， 而 懂得 应 该 在 什么 时 候 使 用 什么 模式 则 较为 困难 。 未 搞 懂 设计 模式 
的 用 途 就 盲目 套用 ， 是 一 种 不 安全 的 做 法 。 你 应 该 尽量 保证 所 选用 的 模式 就 是 最 恰当 的 那 种 ， 并 
且 不 要 过 度 牺牲 性 能 。 


1.7. ,小结 


JavaScript 的 丰富 表现 力 是 其 力量 之 源 。 即 使 这 种 语言 缺少 一 些 有 用 的 内 置 特 性 , 拜 其 灵活 性 
所 赐 ， 你 也 能 自己 加 入 这 些 特性 。 完 成 一 项 任务 可 以 有 多 种 方式 ， 你 可 以 根据 自己 的 技术 背景 和 
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喜好 选择 编写 代码 的 方式 。 

JavaScript 是 弱 类 型 语言 。 程 序 员 在 定义 变量 时 并 不 指定 其 类 型 。 函 数 是 一 等 对 象 ,并 且 可 以 
动态 创建 ， 因 此 你 可 以 创建 闭 包 。 所 有 对 象 和 类 都 是 易 变 的 ， 可 以 在 运行 时 修改 。 可 供 使 用 的 继 
承 范 型 有 两 种 ， 即 原型 式 继承 和 类 式 继承 ， 它 们 各 有 其 优 缺 点 。 


JavaScript 中 的 设计 模式 颇 有 助 益 ， 但 其 不 当 应 用 也 会 产生 负面 效果 。 在 JavaScript 这 类 轻 灵 


的 语言 中 , 过 度 复 杂 的 架构 会 很 快 把 应 用 程序 拖 入 泥沼 。 你 使 用 的 编程 风格 和 选择 的 设计 模式 应 
该 与 所 要 完成 的 具体 工作 相称 。 
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JIo ANR AEA ALAM TRAM IAL GoFfE (iit Hist) — 
书 中 提出 的 可 重用 面向 对 象 设 计 的 第 一 条 原则 中 就 说 道 ,“ 针 对 接口 而 不 是 实现 编程 > 
这 个 概念 的 基本 性 由 此 可 见 一 斑 。 

问题 在 于 ,JavaScript 中 没有 内 置 的 创建 或 实现 接口 的 方法 。 它 也 没有 内 置 的 方法 可 以 用 于 判 
断 一 个 对 象 是 否 实现 了 与 另 一 个 对 象 相同 的 一 套 方法 ， 这 使 对 象 很 难 互 换 使 用 。 好 在 JavaScript 
有 着 出 色 的 灵活 性 ， 因 此 添加 这 些 特 性 并 非 难事 。 

本 章 将 考察 其 他 面向 对 象 的 语言 中 实现 接口 的 方法 ， 并 对 它们 在 这 方面 最 突出 的 特性 进行 模 
仿 。 我 们 先 讨论 在 JavaScript 中 实现 接口 的 各 种 方法 ， 最 后 设计 出 一 个 可 重用 的 类 ， 用 于 检查 对 象 
是 否 具 有 必要 的 方法 。 


2.1 什么 是 接口 


接口 提供 了 一 种 用 以 说 明 一 个 对 象 应 该 具有 哪些 方法 的 手段 。 尽 管 它 可 以 表明 (或 至 少 是 上 暗 
IW) 这 些 方法 的 语义 ， 但 它 并 不 规定 这 些 方法 应 该 如 何 实现 。 例 如， 如 果 一 个 接口 包含 有 一 个 名 
为 setName 的 方法 ， 那 么 你 有 理由 认为 这 个 方法 的 实现 应 该 具有 一 个 字符 串 参 数 ， 并 且 会 把 这 个 
参数 赋 给 一 个 name 变 量 。 

有 了 这 个 工具 ， 你 就 能 按 对 象 提供 的 特性 对 它们 进行 分 组 。 例 如 ， 即使 一 批 对 象 彼此 存在 着 
极 大 的 差异 ， 只 要 它们 都 实现 了 Comparable 接 口 ， 那么 在 object .compare(anotherQbject) 方 法 中 
就 可 以 互 换 使 用 这 些 对 象 。 你 还 可 以 使 用 接口 开发 不 同 的 类 之 间 的 共同 性 。 如 果 把 原本 要 求 以 一 
个 特定 的 类 为 参数 的 函数 改 为 要 求 以 一 个 特定 的 接口 为 参数 的 函数 ， 那么 任何 实现 了 该 接口 的 对 
象 都 可 以 作为 参数 传递 给 它 。 这 样 一 来 ， 彼 此 不 相关 的 对 象 也 可 以 被 同等 对 待 。 


2.1.1 接口 之 利 


在 面向 对 象 的 JavaScript 中 , 接口 有 些 什么 作用 呢 ? 既定 的 一 批 接口 具有 自我 描述 性 ， 并 能 促 
进 代码 的 重用 。 接 口 可 以 告诉 程序 员 一 个 类 实现 了 哪些 方法 ， 从 而 帮助 其 使 用 这 个 类 。 如 果 你 熟 
悉 一 个 特定 的 接口 ， 那 么 就 已 经 知道 如 何 使 用 任何 实现 了 它 的 类 ， 从 而 更 有 可 能 重用 现 有 的 类 。 
接口 还 有 助 于 稳定 不 同 的 类 之 间 的 通信 方式 。 如 果 事 先知 道 了 接口 ， 你 就 能 减少 在 集成 两 个 
对 和 象 的 过 程 中 出 现 的 问题 。 借 助 于 它 ， 你 可 以 事先 就 说 明 你 希望 一 个 类 具有 哪些 特性 和 操作 。 一 
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个 程序 员 可 以 针对 所 需要 的 类 定义 一 个 接口 , 并 把 它 转交 给 另 一 个 程序 员 。 第 二 个 程序 员 可 以 随 
心 所 欲 地 编写 自己 的 代码 ， 只 要 他 定义 的 类 实现 了 那个 接口 就 行 。 这 在 大 型 项 目 中 尤其 有 用 。 

测试 和 调试 因此 也 能 变 得 更 轻松 .在 JavaScript 这 种 弱 类 型 语言 中 , 类 型 不 匹配 错误 很 难 跟踪 。 
使 用 接口 可 以 让 这 种 错误 的 查找 变 得 更 容易 一 点 ， 因 为 此 时 如 果 一 个 对 象 不 像 所 要 求 的 类 型 , 或 
者 没有 实现 必要 的 方法 ， 那 么 你 会 得 到 包含 有 用 信息 的 明确 的 错误 提示 。 这 样 一 来 ,逻辑 错误 可 
以 被 限制 在 方法 自身 ， 而 不 是 在 对 象 的 构成 之 中 。 接 口 还 能 让 代码 变 得 更 稳固 ， 因 为 对 接口 的 任 
何 改 变 在 所 有 实现 它 的 类 中 都 必须 体现 出 来 。 如 果 接 口 添加 了 一 个 操作 ， 而 某 个 实现 它 的 类 并 没 
有 相应 地 添加 这 个 操作 ， 那 么 你 肯定 会 立即 见 到 一 个 错误 。 


2.1.2 Oz 


接口 并 非 没 有 缺点 JavaScript 是 一 种 具有 极 强 表现 力 的 语言 ,这 主要 得 益 于 其 弱 类 型 的 特点 。 
而 接口 的 使 用 则 在 一 定 程度 上 强化 了 类 型 的 作用 。 这 降低 了 语言 的 灵活 性 。 

JavaScript 并 没有 提供 对 接口 的 内 置 支持 ， 而 试图 模仿 其 他 语言 内 置 的 功能 总 会 有 一 些 风险 。 
JavaScript 中 没有 Interface 这 个 关键 词 ， 因 此 ， 不 管 你 用 什么 方法 实现 接口 ， 它 总 是 与 CHH 和 Java 
这 些 语言 中 所用 的 方法 大 相 径 庭 ， 这 加 大 了 初 涉 JavaScript 时 所 遇 到 的 困难 。 

JavaScript 中 任何 实现 接口 的 方法 都 会 对 性 能 造成 一 些 影响 , 在 某 种 程度 上 这 得 归咎 于 额外 的 “ 
方法 调用 的 开销 。 我 们 的 实现 方法 中 使 用 了 两 个 for 循 环 来 遍历 所 需要 的 每 一 个 接口 中 的 每 一 个 
方法 。 对 于 大 型 接口 和 需要 实现 许多 不 同 接口 的 对 象 ， 这 种 检查 可 能 要 花 点 时 间 ， 从 而 对 性 能 造 
成 负面 影响 。 如 果 你 在 乎 这 个 问题 ， 那 么 可 以 在 开发 完成 之 后 剔除 这 种 代码 ， 或 者 将 其 执行 与 一 
个 调试 标志 关联 起 来 ,这样 在 运营 环境 中 它 就 不 会 执行 。 但 要 注意 不 要 过 早 进行 优化 处 理 .Firebug 
这 类 性 能 分 析 器 可 以 帮助 你 判断 是 否 真有 必要 剔除 接口 代码 。 

接口 使 用 中 的 最 大 问题 在 于 ， 无 法 强迫 其 他 程序 员 遵 守 你 定义 的 接口 。 在 其 他 语言 中 ,接口 
的 概念 是 内 置 的 ， 如 果 某 人 定义 了 实现 一 个 接口 的 类 ， 那么 编译 器 会 确保 该 类 的 确实 现 了 这 个 接 
口 。 而 在 JavaScript 中 则 必须 用 手工 的 办 法 保证 某 个 类 实现 了 一 个 接口 。 编 码 规范 和 辅助 类 可 以 提 
供 一 些 帮助 ,但 无 法 彻底 根除 这 个 问题 。 如 果 项 目的 其 他 程序 员 不 认真 对 待 接口 ， 那 么 这 些 接口 
的 使 用 是 无 法 得 到 强制 性 保证 的 。 除 非 项 目的 所 有 人 都 同意 使 用 接口 并 对 其 进行 检查 ， 和 否则 接口 
的 很 多 价值 都 无 从 体现 。 
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这 里 先 概览 一 下 三 种 广泛 使 用 的 面向 对 象 语言 处 理 接口 的 方式 。 你 会 发 现 它们 的 办 法 大 体 相 
似 。 稍 后 在 2.5 节 中 创建 Interface 类 时 ， 我 们 会 尽量 模仿 它们 的 功能 。 

Java 使 用 接口 的 方式 是 面向 对 象 语言 中 比较 典型 的 ， 所 以 我 们 先 从 Java 开 始 。 下 面 是 java .io 
包 中 的 一 个 接口 : 


public interface DataOutput { 
void writeBoolean(boolean value) throws IOException; 
void writeByte(int value) throws IOException; 
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void writeChar(int value) throws IOException; 
void writeShort(int value) throws IOException; 
void writeInt(int value) throws IOException; 


} 

它 列 出 了 一 个 类 应 该 实现 的 一 批 方法 ， 包括 方法 的 参数 和 可 能 会 抛 出 的 异常 。 每 一 行 都 像 是 
一 个 方法 声明 ， 只 不 过 是 以 一 个 分 号 而 不 是 一 对 大 括号 结尾 的 。 

创建 一 个 实现 这 个 接口 的 类 需要 使 用 关键 字 implements: 


public class DataQutputStream extends FilterOutputStream implements DataOutput { 
public final void writeBoolean (boolean value) throws IOException { 
write (value ? 1 : 0); 


} 


} 
该 关 声 明 并 具体 实现 了 接口 中 列 出 的 每 一 个 方法 。 漏 掉 任 何 一 个 方法 都 会 导致 在 编译 时 显示 
错误 。 下 面 是 Java 编 译 器 在 发 现 一 个 接口 错误 时 可 能 产生 的 输出 信息 ; 


MyClass should be declared abstract; it does not define writeBoolean(boolean) in MyClass.” 


erences seeps E S eet 
PHP 的 语法 与 此 类 似 : 
interface MyInterface { 

public function interfaceMethod($argumentOne, $argumentTwo) ; 


} 


Class MyClass implements MyInterface { 
public function interfaceMethod($argumentOne, $argumentTwo) { 
return $argumentOne . $arguemntTwo; 
} 


} 


class BadClass implements MyInterface { 
// No method declarations. 


} 


// BadClass causes this error at run-time: 
// Fatal error: Class BadClass contains 1 abstract methods and must therefore be 
// declared abstract (MyInterface: : interfaceMethod) 


C# 中 也 差不多 : 


interface MyInterface { 
string interfaceMethod(string argumentOne, string argumentTwo); 


} 


class MyClass : MyInterface { 
®© MyClass 应 被 声明 为 抽象 类 ， 它 没有 定义 WriteBoolean (boolean) 方法 。 一 一 译 者 注 
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public string interfaceMethod(string argumentOne, string argumentTwo) { 
return argumentOne + argumentTwo; 
} 
} 


class BadClass : MyInterface { 
// No method declarations. 
} 


// BadClass causes this error at compile-time: 
// BadClass does not implement interface member MyInterface.interfaceMethod() 


上 述 语 言 使 用 接口 的 方式 大 体 相似 。 接口 结构 包含 的 信息 说 明了 需要 实现 什么 方法 以 及 这 些 
方法 应 该 具有 什么 参数 。 类 的 定义 明确 地 声明 它们 实现 了 这 个 接口 〈 通 常 是 使 用 implements 关 键 
字 )。 一 个 类 可 以 实现 不 止 一 个 接口 。 如 果 接 口中 的 某 个 方法 没有 被 实现 ， 则 会 产生 一 个 错误 。 
在 有 的 语言 中 错误 产生 在 编译 时 , 而 在 有 的 语言 中 则 产生 在 运行 时 。 错误 消息 向 用 户 提 供 了 三 种 
信息 : 类 名 ， 接 口 名 和 未 被 实现 的 方法 名 。 

显然 我 们 不 能 如 法 炮制 ， 因 为 JavaScript 没 有 interface 和 implements 关 键 字 ， 也 不 在 运行 时 
对 接口 约定 是 否 得 到 遵守 进行 检查 。 但 是 我 们 可 以 通过 使 用 辅助 类 和 显 式 地 进行 检查 模仿 出 它们 
的 大 部 分 特性 。 


2.3 # JavaScript 中 模仿 接口 


下 面 我 们 将 探讨 在 JavaScript 中 模仿 接口 的 三 种 方法 : 注释 法 、 FER ETE AU A ALTE: 没 
有 哪 种 技术 是 完美 的 ， 但 三 者 结合 使 用 基本 上 可 以 令 人 满意 。 


2.3.1 用 注释 描述 接口 


用 注释 模仿 接口 是 最 简单 的 方法 , 但 效果 却 是 最 差 的 。 这 种 方法 模仿 其 他 面向 对 象 语言 中 的 
做 法 ， 使 用 了 interface 和 implements 关 键 字 ， 但 把 它们 放 在 注释 中 以 免 引 起 语法 错误 。 下 面 的 
示例 演示 了 如 何 把 这 些 关 键 字 添加 到 代码 中 以 描述 所 要 求 的 方法 : 

/* 

interface Composite { 

function add(child); 


function remove(child); 
function getChild(index) ; 


interface FormItem { 
function save(); 


"i 
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var CompositeForm = function(id, method, action) { // implements Composite, FormItem 
s P 

// Implement the Composite interface. 

CompositeForm.prototype.add = function(child) { 


j; 
CompositeForm.prototype.remove = function(child) { 


}5 
CompositeForm.prototype.getChild = function(index) { 


}; 
// Implement the FormItem interface. 
CompositeForm.prototype.save = function() { 


}; 

这 种 模仿 并 不 是 很 好 。 它 没有 为 确保 CompositeForm 真 正 实现 了 正确 的 方法 集 而 进行 检查 ， 
也 不 会 抛 出 错误 以 告知 程序 员 程 序 中 有 问题 。 说 到 底 它 主要 还 是 属于 程序 文档 范畴 。 在 这 种 做 法 
中 ， 对 接口 约定 的 遵守 完全 依靠 自觉 。 

尽管 如 此 ， 这 种 方法 也 有 其 优点 。 它 易于 实现 ， 不 需要 额外 的 类 或 函数 。 它 可 以 提高 代码 的 
可 重用 性 , 因为 现在 那些 类 实现 的 接口 都 有 说 明 ,程序 员 可 以 把 它们 与 其 他 实现 了 同样 接口 的 类 
互 换 使 用 。 这 种 方法 并 不 影响 文件 尺寸 或 执行 速度 ， 因 为 它 所 用 的 注释 可 以 在 对 代码 进行 部 署 时 、 
不 费 吹 灰 之 力 地 予以 剔除 。 但 是 ， 由 于 不 会 提供 错误 消息 ， 它 对 测试 和 调试 没有 什么 帮助 。 


2.3.2 用 属性 检查 模仿 接口 


第 二 种 方法 要 更 严谨 一 点 。 所 有 类 都 明确 地 声明 自己 实现 了 哪些 接口 ， 那些 想 与 这 些 类 打 交 
道 的 对 象 可 以 针对 这 些 声明 进行 检查 。 那 些 接口 自身 仍然 只 是 注释 ， 但 现在 你 可 以 通过 检查 一 个 
属性 得 知 某 个 类 自称 实现 了 什么 接口 : 

/* 

interface Composite { 

function add(child); 


function remove(child); 
function getChild(index); 


interface FormItem { 
function save(); 
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} 
*/ 


var CompositeForm = function(id, method, action) { 
this.implementsInterfaces = [‘Composite’, ‘FormItem']; 


M N 


function addForm(formInstance) { 
if(!implements(formInstance, ‘Composite’, ‘FormItem')) { 
throw new Error("Object does not implement a required interface."); 


} 
sues 


// The implements function, which checks to see if an object declares that it 
// implements the required interfaces. 


function implements(object) { 
for(var i = 1; i < arguments. length; i++) { // Looping through all arguments 
// after the first one. 
var interfaceName = arguments[i]; 
var interfaceFound = false; 
for(var j = 0; j < object.implementsInterfaces. length; j++) { 
if(object.implementsInterfaces[j] == interfaceName) { 
interfaceFound = true; 
break; 
} 
} 
if(!interfaceFound) { 
return false; // An interface was not found. 
} 
} 


return true; // All interfaces were found. 


} 


在 这 个 例子 中 ，CompositeForm 宣 称 自己 实现 了 Composite 和 FormItem 这 两 个 接口 ， 其 做 法 是 
把 这 两 个 接口 的 名 称 加 入 一 个 名 为 implementsInterfaces 的 数组 。 类 显 式 声明 自己 支持 什么 接口 。 
任何 一 个 要 求 其 参数 属于 特定 类 型 的 函数 都 可 以 对 这 个 属性 进行 检查 , 并 在 所 需 接 口 未 在 声明 之 
列 时 抛 出 一 个 错误 。 
这 种 方法 有 几 个 优点 。 它 对 类 所 实现 的 接口 提供 了 文档 说 明 。 如 果 需 要 的 接口 不 在 一 个 类 宣 
称 支 持 的 接口 之 列 ， 你 会 看 到 错误 消息 。 通 过 利用 这 些 错误 ， 你 可 以 强迫 其 他 程序 员 声 明 这 些 接 


这 种 方法 的 主要 缺点 在 于 它 并 未 确保 类 真正 实现 了 自称 实现 的 接口 。 你 只 知道 它 是 否 说 自己 
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实现 了 接口 。 在 创建 一 个 类 时 声明 它 实现 了 一 个 接口 , 但 后 来 在 实现 该 接口 所 规定 的 方法 时 却 漏 
掉 其 中 的 某 一 个 ， 这 一 种 错误 很 常见 。 此 时 所 有 检查 都 能 通过 ， 但 那个 方法 却 并 不 存在 ， 这 将 在 
代码 中 埋 下 一 个 隐患 。 另 外 ， 显 式 声 明 类 所 支持 的 接口 也 需要 一 些 额外 工作 。 


2.3.3 用 鸭 式 辨 型 模仿 接口 


其 实 ， 类 是 否 声明 自己 支持 哪些 接口 并 不 重要 ， 只 要 它 具 有 这 些 接口 中 的 方法 就 行 。 鸭 式 辩 
型 (这 个 名 称 来 自 James Whitcomb Riley 的 名 言 :“ 像 鸭子 一 样 走路 并 且 嘎 嘎 叫 的 就 是 鸭子 ”) E 
是 基于 这 样 的 认识 。 它 把 对 象 实现 的 方法 集 作 为 判断 它 是 不 是 某 个 类 的 实例 的 唯一 标准 。 这 种 技 
术 在 检查 一 个 类 是 否 实现 了 某 个 接口 时 也 可 大 显 身手 。 这 种 方法 背后 的 观点 很 简单 : 如 果 对 象 具 
有 与 接口 定义 的 方法 同名 的 所 有 方法 ,那么 就 可 以 认为 它 实现 了 这 个 接口 。 你 可 以 用 一 个 辅助 函 
数 来 确保 对 象 具 有 所 有 必需 的 方法 : 

// Interfaces. 


var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); 
var FormItem = new Interface('FormItem', ['save']); 


// CompositeForm class 


var CompositeForm = function(id, method, action) { 


: “we 


function addForm(formInstance) { 
ensureImplements(formInstance, Composite, FormI tem) ; 
// This function will throw an error if a required method is not implemented. 


} 

与 另外 两 种 方法 不 同 ， 这 种 方法 并 不 借助 于 注释 。 其 各 个 方面 都 是 可 以 强制 实施 的 。 
ensureImplements 函 数 需 要 至 少 两 个 参数 。 第 一 个 参数 是 想 要 检查 的 对 象 。 其 余 参 数 是 据 以 对 那 
个 对 象 进行 检查 的 接口 。 该 函数 检查 其 第 一 个 参数 代表 的 对 象 是 否 实现 了 那些 接口 所 声明 的 所 有 
方法 。 如 果 发 现 漏 掉 了 任何 一 个 方法 ， 它 就 会 抛 出 错误 ， 其 中 包含 了 所 缺少 的 那个 方法 和 未 被 正 
确实 现 的 接口 的 名 称 等 有 用 信息 。 这 种 检查 可 以 用 在 代码 中 任何 需要 确保 某 个 对 象 实现 了 某 个 接 
口 的 地 方 。 在 本 例 中 ，addForm 函 数 仅 当 一 个 表单 对 象 支持 所 有 必要 的 方法 时 才 会 对 其 执行 添加 
操作 。 

尽管 鸭 式 辨 型 可 能 是 上 述 三 种 方法 中 最 有 用 的 一 种 ， 但 它 也 有 一 些 缺点 。 在 这 种 方法 中 , 类 
并 不 声明 自己 实现 了 哪些 接口 , 这 降低 了 代码 的 可 重用 性 ， 并 且 也 缺乏 其 他 两 种 方法 那样 的 自我 
描述 性 。 它 需要 使 用 一 个 辅助 类 〈Interface) 和 一 个 辅助 函数 Censurelmplements). 而 且 ， 它 
只 关心 方法 的 名 称 ， 并 不 检查 其 参数 的 名 称 、 数 目 或 类 型 。 
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24 本 书 采 用 的 接口 实现 方法 


本 书 综合 使 用 了 第 一 种 和 第 三 种 方法 。 我 们 用 注释 声明 类 支持 的 接口 ， 从 而 提高 代码 的 可 重 
用 性 及 其 文档 的 完善 性 。 我 们 还 用 辅助 类 Interface 及 其 类 方法 Interface.ensureImplements 来 对 
对 象 实现 的 方法 进行 显 式 检 查 。 如 果 对 象 未 能 通过 检查 ， 这 个 方法 将 返回 一 条 有 用 的 错误 消息 。 
下 面 是 一 个 结合 使 用 Interface 类 与 注释 的 示例 : 


// Interfaces. 


var Composite = new Interface('Composite’, ['add', ‘remove’, ‘getChild']); 
var FormItem = new Interface('FormItem', ['save']); 


// CompositeForm class 
var CompositeForm = function(id, method, action) { // implements Composite, FormItem 


; D 


function addForm(formInstance) { 
Interface.ensureImplements(formInstance, Composite, FormItem); 
// This function will throw an error if a required method is not implemented, 
// halting execution of the function. 
// All code beneath this line will be executed only if the checks pass. 


: E 
Interface.ensureImplements 起 着 严格 把 关 的 作用 。 如 果 它 发 现 有 问题 ， 就 会 抛 出 一 个 错误 。 


这 个 错误 要 么 被 其 他 代码 捕捉 到 并 得 到 处 理 ， 要 么 中 断 程序 的 执行 。 无 论 是 哪 种 情况 ， 程 序 员 都 
能 立即 知道 代码 中 存在 问题 ， 并 且 知 道 其 来 源 位 置 。 


2.5 Interface 类 
下 面 是 本 书 中 使 用 的 Interface 类 的 定义 ; 


// Constructor. 


var Interface = function(name, methods) { 
if(arguments.length != 2) { 
throw new Error("Interface constructor called with " + arguments. length + 
"arguments, but expected exactly 2."); 


} 


this.name = name; 

this.methods = []; 

for(var i = 0, len = methods.length; i < len; i++) { 
if(typeof methods[i] !== 'string') { 
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throw new Error("Interface constructor expects method names to be " 
+ “passed in as a string."); 


} 
this.methods.push(methods[i]); 
} 
J; 


// Static class method. 


Interface.ensureImplements = function(object) { 
if(arguments. length < 2) { 
throw new Error("Function Interface.ensureImplements called with " + 
arguments.length + “arguments, but expected at least 2."); 


} 


for(var i = 1, len = arguments.length; i < len; i++) { 
var interface = arguments[i]; 
if(interface.constructor !== Interface) { 
throw new Error("Function Interface.ensureImplements expects arguments” 
+ "two and above to be instances of Interface."); 


} 


for(var j = 0, methodsLen = interface.methods. length; j < methodsLen; j++) { 
var method = interface.methods|[j]; 
if(!object[method] || typeof object[method] !== 'function') { 
throw new Error("Function Interface.ensureImplements: object " 
+ "does not implement the " + interface.name 
+ " interface. Method " + method + " was not found."); 


} 
}; 
从 中 可 以 看 到 ， 该 类 的 所 有 方法 对 其 参数 都 有 严格 的 要 求 ， 如 果 参 数 未 能 通过 检查 ,将 导致 


错误 的 抛 出 。 我 们 特地 加 入 这 种 检查 的 目的 在 于 : 如 果 没 有 错误 被 抛 出 ， 那 么 你 可 以 肯定 接口 已 
经 得 到 了 正确 的 声明 和 实现 。 


2.5.1 Interface 类 的 使 用 场合 


严格 的 类 型 检查 并 不 总 是 明智 的 。 许 多 JavaScript 程 序 员 根本 不 用 接口 或 它 所 提供 的 那 种 检 
音 ， 也 照样 一 干 多 年 。 接 口 在 运用 设计 模式 实现 复杂 系统 的 时 候 最 能 体现 其 价值 。 它 看 似 降低 了 
JavaScript 的 灵活 性 ， 而 实际 上 ， 因 为 使 用 接口 可 以 降低 对 象 间 的 耦合 程度 ， 所 以 它 提 高 了 代码 的 
有 灵活 性 。 接 口 的 使 用 可 以 让 函数 变 得 更 灵活 ， 因 为 你 既 能 向 函数 传递 任何 类 型 的 参数 ， 又 能 保证 
它 只 会 使 用 那些 具有 必要 方法 的 对 象 。 某 些 场合 下 接口 很 有 用 处 。 

在 有 许多 程序 员 参 与 的 大 型 项 目 中 , 接口 起 着 至 关 重 要 的 作用 。 程序 员 常 常 需要 使 用 还 未 编 
写 出 来 的 API， 或 者 需要 提供 一 些 占 位 代码 stub》 以 免 延 误 开 发 进度 。 接 口 在 这 种 场合 中 的 重 
要 性 表现 在 许多 方面 。 它 们 记载 着 API， 可 作为 程序 员 正式 交流 的 工具 。 在 占 位 代码 被 替换 为 最 
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终 的 API 时 ， 你 立刻 就 能 知道 所 需 方 法 是 否 得 到 了 实现 。 在 开发 过 程 中 ， 如 果 API 发 生 了 变化 ， 
只 要 新 的 API 实 现 了 同样 的 接口 ， 它 就 能 和 天衣无缝 地 替换 原 有 API。 
现在 项 目 中 用 到 来 自 因特网 上 的 、 你 无 法 直接 控制 的 代码 的 情况 越 来 越 普遍 。 部 署 在 外 部 环 
境 中 的 程序 库 以 及 搜索 、 电 子 邮 件 、 地 图 等 服务 的 API 都 是 这 类 代码 的 例子 。 即 使 它们 有 着 可 信 
的 来 源 ， 也 必须 谨慎 使 用 ,确保 其 变化 不 会 在 自己 的 代码 中 引起 问题 。 一 种 应 对 之 策 是 为 所 依赖 
的 每 一 个 API 创 建 一 个 Interface 对 象 ， 然 后 对 接收 到 的 每 一 个 对 象 都 进行 检查 ， 以 确保 其 正确 实 
现 了 那些 接口 : 
var DynamicMap = new Interface('DynamicMap', ['centerOnPoint', 'zoom', "draw']); 
function displayRoute(mapInstance) { 
Interface.ensureImplements(mapInstace, DynamicMap) ; 
mapInstance.centerOnPoint(12, 34); 


mapInstance.zoom(5); 
mapInstance.draw(); 


} 

在 这 个 示例 中 , displayRoute 函 数 要 求 传 入 的 参数 具有 3 个 特定 方法 ,通过 使 用 一 个 Interface 
对 象 和 调用 Interface.ensureImplements 方 法 ， 可 以 确保 这 些 方法 已 经 得 到 实现 ， 否 则 你 将 见 到 
一 个 错误 。 这 个 错误 可 以 用 一 个 try/catch 块 捕获 ， 然 后 可 能 会 被 用 于 发 送 一 条 Ajax 请 求 ， 将 外 
部 API 引 起 的 问题 告知 用 户 。 这 有 助 于 提高 mash-up 应 用 系统 的 稳定 性 和 安全 性 。 


2.5.2 Interface 类 的 用 法 


判断 在 代码 中 使 用 接口 是 否 划 算是 最 重要 (也 是 最 困难 ) 的 一 步 。 对 于 小 型 的 、 不 太 费 事 的 
项 目 来 说 ， 接 口 的 好 处 也 许 并 不 明显 ， 只 是 徒 增 其 复杂 度 而 已 。 你 需要 自行 权衡 其 利弊 。 如 果 认 
为 在 项 目 中 使 用 接口 利 大 于 弊 ， 那 么 可 以 参照 如 下 使 用 说 明 。 

(1) 将 Interface 类 纳入 HTML 文 件 。 你 可 以 在 本 书 的 附属 网 站 http://jsdesignpatterns.com/ 上 下 
载 到 Interface.js 文 件 。 

(2) 逐一 检查 代码 中 所 有 以 对 象 为 参数 的 方法 。 搞 清 代 码 的 正常 运转 要 求 这 些 对 象 参数 具有 
哪些 方法 。 

(3) 为 你 需要 的 每 一 个 不 同 的 方法 集 创 建 一 个 Interface 对 象 。 

(4) 剔除 所 有 针对 构造 器 的 显 式 检 查 。 因 为 我 们 使 用 的 是 鸭 式 辩 型 ， 所 以 对 象 的 类 型 不 再 重要 。， 

(5) 以 Interface.ensureImplements 取 代 原 来 的 构造 器 检查 。 

这 样 做 有 什么 好 处 ? 答案 是 代码 的 耦合 程度 降低 了 。 因为 现在 你 不 再 依赖 于 任何 特定 的 类 的 
实例 ， 而 是 检查 所 需要 的 特性 是 否 都 已 就 绪 〈 不 管 其 具体 如 何 实现 )。 由 此 你 在 对 代码 进行 优化 
和 重 构 时 将 拥有 更 大 的 自由 。 


2.5.3 示例: 使 用 Interface 类 
假设 你 要 创建 一 个 类 ， 它 可 以 将 一 些 自动 化 测试 结果 转化 为 适 于 在 网 页 上 查看 的 格式 。 该 类 
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的 构造 器 以 一 个 TestResult 类 的 实例 为 参数 。 它 会 应 客户 的 请 求 对 这 个 TestResult 对 象 所 封装 的 
数据 进行 格式 化 ， 然 后 输出 。 这 个 ResultFormatter 类 最 初 的 实现 如 下 ， 


// ResultFormatter class, before we implement interface checking. 


var ResultFormatter = function(resultsObject) { 
if(!(resultsObject instanceOf TestResult)) { 
throw new Error("ResultsFormatter: constructor requires an instance " 
+ "of TestResult as an argument."); 


this.resultsObject = resultsObject; 
}; 


ResultFormatter.prototype.renderResults = function() { 
var dateOfTest = this.resultsObject.getDate(); 
var resultsArray = this.resultsObject.getResults(); 


var resultsContainer = document.createElement('div'); 


var resultsHeader = document.createElement('h3'); 
resultsHeader.innerHTML = ‘Test Results from ' + dateOfTest.toUTCString(); 
resultsContainer.appendChild(resultsHeader) ; 


var resultsList = document.createElement(‘ul'); 
resultsContainer.appendChild(resultsList) ; 


for(var i = 0, len = resultsArray.length; i < len; i++) { 
var listItem = document.createElement(‘li'); 
listItem.innerHTML = resultsArray[i]; 
resultsList.appendChild(listItem) ; 

} 


return resultsContainer; 

}; 

. 该 类 的 构造 器 会 对 参数 进行 检查 ， 以 确保 其 的 确 为 TestResult 类 的 实例 。 如 果 参 数 达 不 到 要 
求 ， 构 造 器 将 抛 出 一 个 错误 。 有 了 这 样 的 保证 ， 在 编写 renderResults 方 法 时 ， 你 就 可 以 认定 有 
getDate 和 getResults 这 两 个 方法 可 供 使 用 。 咽 …… 当真 是 这 样 吗 ? 在 构造 器 中 只 对 results- 
0bject 是 否 为 TestResult 类 的 实例 进行 了 检查 。 实 际 上 这 并 不 能 保证 所 需要 的 方法 得 到 了 实现 。 
TestResult 类 可 能 会 被 修改 ,致使 其 不 再 拥有 getDate 方 法 。 在 此 情况 下 ,构造 器 中 的 检查 仍 能 通 
过 ， 但 renderResults 方 法 却 会 失灵 。 

此 外 ， 构 造 器 中 的 这 个 检查 施加 了 一 些 不 必要 的 限制 。 它 不 允许 使 用 其 他 类 的 实例 作 参 数 ， 
哪怕 它们 原本 可 以 如 愿 发 挥 作用 。 例如, 有 一 个 名 为 NeatherData 的 类 也 拥有 getDate 和 getResults 
这 两 个 方法 。 它 本 来 可 以 被 ResultFormatter 类 用 得 好 好 的 , 但 是 那个 显 式 类 型 检查 ( 它 使 用 的 是 
instance0f 运 算 符 ) 会 阻止 使 用 WeatherData 类 的 任何 实例 。 

问题 的 解决 办 法 是 删除 那个 使 用 instance0f 的 检查 ， 并 用 接口 代替 它 。 首 先 ， 我 们 需要 创建 
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这 个 接口 : 


// ResultSet Interface. 


var ResultSet = new Interface('ResultSet', [‘getDate', ‘getResults']}); 


这 行 代码 创建 了 一 个 Interface 对 象 的 新 实例 。 第 一 个 参数 是 接口 的 名 称 ， 第 二 个 参数 是 一 
个 字符 串 数 组 ， 其 中 的 每 个 字符 串 都 是 一 个 必需 的 方法 的 名 称 。 有 了 这 个 接口 之 后 ， 就 可 以 用 接 
口 检查 替代 instance0f 检 查 了 : 


// ResultFormatter class, after adding Interface checking. 


var ResultFormatter = function(resultsObject) { 
Interface.ensureImplements(resultsObject, ResultSet); 
this.resultsObject = resultsObject; 


2 


ResultFormatter.prototype.renderResults = function() { 


bs 

renderResults 方 法 保持 不 变 。 而 构造 器 则 被 改 为 使 用 ensureImplements 方 法 而 不 是 
instance0f 运 算 符 。 现 在 这 个 构造 器 可 以 接受 WeatherData 或 其 他 任何 实现 了 所 需 方法 的 类 的 实 
例 。 我们 只 修改 了 几 行 ResultFormatter 类 的 代码 ,就 让 那个 检查 变 得 更 准确 ( 它 要 求 参 数 对 象 实 
现 所 有 必需 的 方法 )， 而 且 也 更 宽容 ( 它 允许 使 用 任何 匹配 该 接口 的 对 象 )。 [22 | 
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下 面 列 出 的 设计 模式 〈 后 面 的 章节 会 对 它们 进行 讨论 ) 尤其 依赖 接口 。 

口 工厂 模式 。 对 象 工厂 所 创建 的 具体 对 象 会 因 具 体 情况 而 异 。 使 用 接口 可 以 确保 所 创建 的 
这 些 对 象 可 以 互 换 使 用 。 也 就 是 说 ， 对 象 工厂 可 以 保证 其 生产 出 来 的 对 象 都 实现 了 必需 
的 方法 。 

O 组 合 模式 。 如 果 不 用 接口 你 就 不 可 能 使 用 这 个 模式 。 组 合 模式 的 中 心思 想 在 于 可 以 将 对 
象 群体 与 其 组 成 对 象 同 等 对 待 。 这 是 通过 让 它们 实现 同样 的 接口 来 做 到 的 。 如 果 不 进行 
某 种 形式 的 鸭 式 辩 型 或 类 型 检查 ， 组 合 模式 就 会 失去 大 部 分 作用 。 

O 装饰 者 模式 。 装 饰 者 通过 透明 地 为 另 一 对 象 提供 包装 而 发 挥 作用 。 这 是 通过 实现 与 另外 
那个 对 象 完全 相同 的 接口 而 做 到 的 。 对 于 外 界 而 言 ， 一 个 装饰 者 和 它 所 包装 的 对 象 看 不 
出 有 什么 区 别 。 我 们 将 使 用 Interface 类 来 确保 所 创建 的 装饰 者 对 象 实现 了 必需 的 方法 。 

O 命令 模式 。 代 码 中 所 有 的 命令 对 象 都 要 实现 同一 批 方法 (它们 通常 被 命名 为 execute、run 
或 undo)。 通 过 使 用 接口 ， 你 为 执行 这 些 命令 对 象 而 创建 的 类 可 以 不 必 知 道 这 些 对 象 具体 
是 什么 ， 只 要 知道 它们 都 实现 了 正确 的 接口 即 可 。 藉 此 你 可 以 创建 出 模块 化 程度 很 高 而 
耦合 程度 很 低 的 用 户 界 面 和 API。 

本 书 通 篇 都 要 用 到 接口 这 个 重要 概念 。 你 应 该 项 酌 一 下 ， 看 看 自己 的 项 目 是 否 需要 用 到 它 。 
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2.7 小 结 


本 章 讨论 了 接口 在 一 些 流行 的 面向 对 象 语言 中 的 使 用 和 实现 方式 , 而 且说 明了 接口 概念 的 各 
种 不 同 实现 方式 都 有 一 些 共 同 特性 : 它们 都 提供 一 种 规定 必需 方法 的 手段 ; 它们 都 提供 一 种 检查 
这 些 方法 是 否 确 实 得 到 实现 的 手段 ， 并 且 在 结果 为 否定 的 时 候 能 提供 有 用 的 错误 信息 。 在 
JavaScript 中 可 以 结合 使 用 文档 手段 (注释 )、 辅 助 类 和 觅 式 辨 型 来 模仿 这 些 特性 。 使 用 接口 的 难 
点 在 于 判断 是 否 有 必要 使 用 它 。 它 并 不 总 是 不 可 或 缺 的 。 灵 活性 是 JavaScript 最 强大 的 特色 之 一 。 
强制 进行 不 必要 的 严格 类 型 检查 会 损害 这 种 灵活 性 。 谨 慎 地 使 用 Interface 类 有 助 于 创建 更 健壮 

的 类 和 更 稳定 的 代码 。 
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语言 中 最 基本 和 有 用 的 特性 之 一 。 通 过 将 一 个 方法 
穴 现 至 节 对 其 他 对 象 保密 以 降低 对 象 之 间 的 看 合 

巴 有 许多 人 参与 设计 的 情况 下 ， 这 
[ 


n yields aca 
机 制 。 与 讲述 接口 的 前 一 Bree marae 目前 有 几 种 办 法 可 以 用 来 他 
建 具有 公用 、 私 用 和 特权 Cprivile 缺点 。 我 们 也 会 讨论 在 哪些 场 


TAR 


3.1 信息 隐藏 原则 


我 们 先 举 个 例子 来 说 明 信 息 隐藏 原则 。 假设 每 天 晚上 同事 都 会 向 你 提交 一 份 关于 当天 收益 的 
报告 单 。 这 个 接口 定义 得 很 清楚 :你 要 求 对 方 提 供 信息 ， 而 你 的 同事 搜集 原始 数据 ， 计 算 收益 ， 
然后 向 你 汇报 。 就 算 你 跳槽 去 了 别家 公司 ， 由 于 这 个 接口 依然 存在 ， 所 以 你 的 接替 者 很 容易 用 同 
样 的 方式 要 求 得 到 信息 汇报 。 

有 一 天 , 你 希望 能 比 听取 同事 的 汇报 更 频繁 地 得 到 这 种 信息 。 你 找到 了 原始 数据 的 存放 地 点 ， 
并 且 自 己 搜集 和 计算 相关 数据 。 事情 原本 很 顺利 , 但 后 来 情况 发 生 了 变化 。 数 据 原来 采用 逗号 分 
隔 值 格式 ， 但 现在 改 为 采用 XML 格式 。 而 且 ， 计 算 方法 也 会 根据 会 计 和 税收 法 规 进行 调整 ， 而 
你 并 不 精通 这 些 法 规 。 如 果 你 要 辞职 ， 那 么 首先 必须 教会 接替 者 这 些 工 作 ， 这 比 起 从 同事 那里 请 
求 最 终 计 算 结 果 可 要 麻烦 多 了 。 

在 上 述 场 景 中 ， 你 对 产生 收益 信息 的 内 部 细节 形成 了 依赖 。 如 果 这 种 内 部 实现 发 生变 化 ， 你 
必须 重新 学 习 整 个 系统 并 从 头 开始 。 用 面向 对 象 设 计 的 术语 来 说 ， 你 与 原始 数据 之 间 形 成 了 强硬 
合 。 信 息 隐 藏 原则 有 助 于 减轻 系统 中 两 个 参与 者 之 间 的 依赖 性 。 它 指出 ， 两 个 参与 者 必须 通过 明 
确 的 通道 传送 信息 。 在 本 例 中 ， 这 些 通道 就 是 对 象 间 的 接口 。 


3.1.1 封装 与 信息 隐藏 


封装 与 信息 隐藏 之 间 是 什么 关系 呢 ? 你 可 以 把 它们 视 为 同一 个 概念 的 两 种 表述 。 信息 隐藏 是 
目的 ,而 封装 则 是 藉以 达到 这 个 目的 的 技术 。 本章 着 重 讨论 一 些 在 JavaScript 中 进行 封装 的 具体 例 


ee ps 
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Tt. 

封装 (encapsulation) 可 以 被 定义 为 对 对 象 的 内 部 数据 表现 形式 和 实现 细节 进行 隐藏 。 要 想 
访问 封装 过 的 对 象 中 的 数据 ， 只 有 使 用 已 定义 的 操作 这 一 种 办 法 。 通 过 封装 可 以 强制 实施 信息 隐 
藏 。 许 多 面向 对 象 语言 都 使 用 关键 字 来 说 明 某 些 方法 和 属性 应 被 隐藏 。 例 如 在 Java 中 ， 用 关键 字 
private 来 声明 一 个 方法 ， 可 以 确保 只 有 该 对 象 内 部 的 代码 才能 执行 它 。 但 在 JavaScript 中 没有 这 
样 的 关键 字 , 我 们 将 使 用 闭 包 的 概念 来 创建 只 允许 从 对 象 内 部 访问 的 方法 和 属性 。 这 比 使 用 关键 
字 的 办 法 更 复杂 (也 更 费解 )， 但 它 也 能 获得 同样 的 最 终 效 果 。 


3.1.2 ”接口 扮演 的 角色 


在 向 其 他 对 象 隐藏 信息 的 过 程 中 接口 是 如 何 发 挥 作 用 的 呢 ? 接口 提供 了 一 份 记载 着 可 供 公 
众 访问 的 方法 的 契约 。 它 定义 了 两 个 对 象 间 可 以 具有 的 关系 。 只 要 接口 不 变 ， 这 个 关系 的 双方 都 
是 可 替换 的 。 你 不 一 定 非得 使 用 像 第 2 章 中 定义 的 那 种 严格 的 接口 ， 但 大 多 数 情 况 下 ， 你 将 发 现 
对 可 以 使 用 的 方法 加 以 记载 会 很 有 好 处 。 不 是 有 了 接口 就 万 事 大 吉 ， 你 应 该 避免 公开 未 定义 于 接 
口中 的 方法 。 否 则 其 他 对 象 可 能 会 对 那些 并 不 属于 接口 的 方法 产生 依赖 ， 而 这 是 不 安全 的 。 因 为 
这 些 方法 随时 都 可 能 发 生 改 变 或 被 删除 ， 从 而 导致 整个 系统 失灵 。 

一 个 理想 的 软件 系统 应 该 为 所 有 类 定义 接口 。 这 些 类 只 向 外 界 提供 它们 实现 的 接口 中 规定 的 
方法 ,任何 别 的 方法 都 留 作 自 用 。 其 所 有 属性 都 是 私 用 的 ， 外 界 只 能 通过 接口 中 定义 的 存 取 操 作 
与 之 打交道 。 但 实际 的 系统 很 少 能 真正 达到 这 样 的 境界 。 优 质 的 代码 应 尽量 向 这 个 目标 靠拢 ， 但 
叉 不 能 过 于 刻板 ， 把 那些 并 不 需要 这 些 特性 的 简单 项 目 复杂 化 。 


3.2 创建 对 象 的 基本 模式 


本 节 将 讨论 创建 对 象 的 各 种 不 同方 式 及 其 特点 。JavaScript 中 创建 对 象 的 基本 模式 有 3 种 。 门 
FRFR (fully exposed) 对 象 创建 方式 是 最 简单 的 一 种 ， 但 它 只 能 提供 公用 成 员 。 第 二 种 做 法 
在 此 方面 有 所 改进 ， 它 使 用 下 划 线 来 表示 方法 或 属性 的 私 用 性 。 第 三 种 做 法 使 用 闭 包 来 创建 真正 
私 用 的 成 员 ， 这 些 成 员 只 能 通过 一 些 特权 方法 访问 。 


qj 一 一 Tree i ee Se 
注解 不 能 简单 地 说 这 些 定义 类 的 模式 中 哪 种 是 “正确 的 >。 它 们 都 有 各 自 的 利 产 . 每 一 种 做 法 
都 有 可 能 适合 你 ， 具 体 取决 于 项 目的 需要 。 





以 Book 类 为 例 。 假 设 你 接 到 这 样 一 项 任务 : 创建 一 个 用 来 存储 关于 一 本 书 的 数据 的 类 ， 并 为 
其 实现 一 个 以 HTML 形 式 显示 这 些 数据 的 方法 。 你 只 负责 创建 这 个 类 , 别人 会 创建 并 使 用 其 实例 。 
它 会 被 这 样 使 用 : 

// Book(isbn, title, author) 


var theHobbit = new Book('0-395-07122-4', 'The Hobbit',. 'J. R. R. Tolkien’); 
theHobbit.display(); // Outputs the data by creating and populating an HTML element. 
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3.2.1 门户 大 开 型 对 象 


实现 Book 类 最 简单 的 做 法 是 按 传统 方式 创建 一 个 类 ， 用 一 个 函数 来 做 其 构造 器 。 我 们 称 其 为 
门户 大 开 型 对 象 ， 因 为 它 的 所 有 属性 和 方法 都 是 公开 的 、 可 访问 的 。 这 些 公 用 属性 需要 使 用 this 
关键 字 来 创建 : 


var Book = function(isbn, title, author) { 
if(isbn == undefined) throw new Error('Book constructor requires an isbn.'); 
this.isbn = isbn; 
this.title = title || “No title specified’; 
this.author = author || ‘No author specified’; 


} 
Book.prototype.display = function() { 


}; 

在 构造 器 中 ， 如 果 检 查 到 没有 提供 ISBN， 将 会 抛 出 一 个 错误 。 这 是 因为 display 方 法 要 求 书 
籍 对 象 有 一 个 准确 的 ISBN, 否则 就 不 能 找到 相应 的 图 片 ,也 不 能 生成 一 个 用 于 购书 的 链接 。title 
和 author 参 数 都 是 可 选 的 ， 所 以 要 准备 默认 值 以 防 它们 未 被 提供 。 退 辑 “ 或 ”运算 符 “||” 在 此 
用 于 提供 后 备 值 。 如 果 提 供 了 tit1e 或 author， 那 么 运算 符 左边 的 运算 数 的 求 值 结果 为 true， 因 此 
这 个 运算 数 会 被 作为 运算 结果 返回 。 如 果 没 有 提供 tit1e 或 author， 那 么 左边 的 运算 数 的 求 值 结果 
为 false， 作 为 运算 结果 返回 的 是 右边 的 运算 数 。 

乍 一 看 这 个 类 似乎 符合 一 切 需 要 。 但 其 最 大 的 问题 是 你 无 法 检验 ISBN 数 据 的 完整 性 ， 而 不 完 
整 的 ISBN 数 据 有 可 能 导致 display 方 法 失灵 。 这 破坏 了 你 与 其 他 程序 员 之 间 的 契约 。 如 果 Book 对 象 
在 创建 时 没有 抛 出 任何 错误 ， 那 么 djsplay 方 法 应 该 能 正常 工作 才 对 ， 但 是 由 于 没有 进行 完整 性 
检查 ， 这 就 不 一 定 了 。 为 了 解决 这 个 问题 ， 下 面 的 版 本 强化 了 对 ISBN 的 检查 : 


var Book = function(isbn, title, author) { 
if(!this.checkIsbn(isbn)) throw new Error('Book: Invalid ISBN.'); 
this.isbn = isbn; 
this.title = title || 'No title specified’; 
this.author = author || ‘No author specified’; 
} 
Book.prototype = { 
checkIsbn: function(isbn) { 
if(isbn == undefined || typeof isbn != 'string') { 
return false; 


isbn = isbn.replace(/-/, ''); // Remove dashes. 
if(isbn. length != 10 && isbn. length != 13) { 
return false; 


} 


var sum = 0; 
if(isbn.length === 10) { // 10 digit ISBN. 
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If(!isbn.match(/ *\d{9}/)) { // Ensure characters 1 through 9 are digits. 
return false; 


} 


for(var i = 0; i < 9; i++) { 
sum += isbn.charAt(i) * (10 - i); 


} 
var checksum = sum % 11; 
if(checksum === 10) checksum = 'X'; 


if(isbn.charAt(9) != checksum) { 
return false; 


} 
else { // 13 digit ISBN. 
if(!isbn.match(/*\d{12}/)) { // Ensure characters 1 through 12 are digits. 
return false; 


} 


for(var i = 0; i < 12; i++) { 
sum += isbn.charAt(i) * ((i % 2 === 0) ? 1 : 3); 


var checksum = sum % 10; 
if(isbn.charAt(12) != checksum) { 
return false; 
} 
} 


return true; // All tests passed. 


display: function() { 
} 
}; | 
上 述 代 码 中 添加 了 一 个 checkIsbn 方 法 ， 以 保证 ISBN 是 一 个 具有 正确 的 位 数 和 校 验 和 的 字符 
串 。 因 为 现在 该 类 有 了 两 个 方法 ， 所 以 Book .prototype 被 设 为 一 个 对 象 字面 量 ， 这 样 在 定义 多 个 
方法 的 时 候 就 不 用 在 每 个 方法 前 面 都 加 上 Book.prototype 了 。 这 两 种 定义 方法 的 做 法 效果 是 相 同 
的 ， 本 章 都 会 用 到 。 
现在 情况 看 起 来 有 所 改善 。 在 创建 对 象 的 时 候 可 以 对 ISBN 的 有 效 性 进行 检查 ， 这 可 以 确保 
display 方 法 能 正常 工作 。 但 是 现在 又 出 现 了 一 个 问题 。 假 设 另 一 个 程序 员 认 识 到 一 本 书 可 能 会 
有 多 个 版 本 , 每 个 版 本 都 有 自己 的 ISBN。 他 设计 了 一 个 用 来 在 这 些 不 同 版 本 之 中 进行 选择 的 算法 ， 
并 在 实例 化 书籍 对 象 之 后 直接 用 它 修改 其 isbn 属 性 ; 


theHobbit.isbn = '978-0261103283'; 
theHobbit .display(); 


即使 能 在 构造 器 中 对 数据 的 完整 性 进行 检验 ,你 对 其 他 程序 员 会 把 什么 样 的 值 直接 赋 给 isbn 
属性 还 是 毫 无 控制 。 为 了 保护 内 部 数据 ， 你 为 每 个 属性 都 提供 了 取 值 器 〈accessor) 和 赋值 器 
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(mutator) 方法 。 取 值 器 方法 (通常 以 getAttributeName 这 种 形式 命名 ) 用 于 获取 属性 值 ， 而 赋 
值 器 方法 (通常 以 setAttributeName 这 种 形式 命名 〉 则 用 于 设置 属性 值 。 通 过 使 用 赋值 器 ， 你 可 
以 在 把 一 个 新 值 真 正 赋 给 属性 之 前 进行 各 种 检验 。 下 面 是 加 入 了 取 值 器 和 赋值 器 之 后 的 新 版 Book 
对 象 ; 
var Publication = new Interface(‘Publication', ['getIsbn', ‘setIsbn', ‘getTitle’, 
'setTitle', ‘getAuthor', ‘setAuthor', ‘display']); 


var Book = function(isbn, title, author) { // implements Publication 
this.setIsbn(isbn); 
this.setTitle(title); 
this.setAuthor(author) ; 

} 


Book.prototype = { 
checkIsbn: function(isbn) { 


b 

getIsbn: function() { 
return this.isbn; 

}, 

setIsbn: function(isbn) { 
if(!this.checkIsbn(isbn)) throw new Error('Book: Invalid ISBN.'); 
this.isbn = isbn; 


}, 


getTitle: function() { 
return this.title; 
}, 
setTitle: function(title) { 
this.title = title || “No title specified’; 
Js 
getAuthor: function() { 
return this.author; 


}, 
setAuthor: function(author) { 

this.author = author || 'No author specified’; 
}, 


display: function() { 

} 

}; 

注意 ， 上 述 代码 中 还 定义 了 一 个 接口 。 从 现在 开始 ， 其 他 程序 员 应 该 只 使 用 这 个 接口 中 定义 
的 方法 与 对 象 打交道 。 构 造 器 中 也 调用 了 赋值 器 方法 。 因 为 没有 必要 重复 实现 同样 的 检验 ， 所 以 
你 在 对 象 的 内 部 也 使 用 这 些 方法 。 

这 是 使 用 门户 大 开 型 对 象 创建 方式 所 能 得 到 的 最 好 结果 。 里 面包 含 了 一 个 明确 定义 的 接口 、 
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一 些 对 数据 具有 保护 作用 的 取 值 器 和 赋值 器 方法 ， 以 及 一 些 有 效 性 检验 方法 。 尽 管 这 个 设计 方案 
有 这 样 一 些 特性 ， 它 还 是 存在 一 个 漏洞 。 虽 然 我 们 为 设置 属性 提供 了 赋值 器 方法 ， 但 那些 属性 仍 
然 是 公开 的 ， 可 以 被 直接 设置 ， 而 在 这 种 方案 中 却 无 法 阻止 这 种 行为 。 不 管 是 出 于 有 意 〈 虽 然 程 
序 员 知 道 那个 接口 ,但 却 未 予 理 皮 ) 还 是 无 意 (程序 员 不 知道 他 不 应 该 直接 对 其 进行 设置 )，isbn 
属性 都 可 能 会 被 设置 为 一 个 无 效 值 。 

尽管 这 种 创建 对 象 的 模式 存在 上 述 缺 陷 , 它 也 有 许多 优点 。 它 易于 使 用 ，JavaScript 编 程 新 手 
很 快 就 能 学 会 。 创建 这 样 的 对 象 不 要 求 你 深入 理解 作用 域 或 调用 链 的 概念 。 由 于 所 有 方法 和 属性 
都 是 公开 的 ， 派 生子 类 和 进行 单元 测试 也 很 容易 。 唯 一 的 次 端 在 于 无 法 保护 内 部 数据 ,而 且 取 值 
器 和 赋值 器 方法 也 引入 了 严格 说 来 并 非 必 不 可 少 的 额外 的 代码 (在 JavaScript 文 件 大 小 很 重要 的 场 
合 ， 这 可 能 是 一 个 应 该 搞 量 一 下 的 问题 )。 


3.2.2 用 命名 规范 区 别 私 用 成 员 


本 节 讨 论 通 过 使 用 命名 规范 模仿 私 用 成 员 的 模式 。 这 种 方法 致力 于 解决 上 一 节 中 遇 到 的 一 个 
问题 ， 即 无 法 阻止 其 他 程序 员 无 意 中 绕 过 所 有 检验 步骤 。 从 本 质 上 说 这 种 模式 与 门户 大 开 型 对 象 
创建 模式 如 出 一 加 ， 只 不 过 在 一 些 方法 和 属性 的 名 称 前 加 了 下 划 线 以 示 其 私 用 性 而 已 。 

var Book = function(isbn, title, author) { // implements Publication 

this.setIsbn(isbn); 
this.setTitle(title); 
this.setAuthor(author) ; 

} 


Book.prototype = { 
checkIsbn: function(isbn) { 


}, | 
getIsbn: function() { 
return this. isbn; 


setIsbn: function(isbn) { 
if(!this.checkIsbn(isbn)) throw new Error('Book: Invalid ISBN.'); 
this. isbn = isbn; 


h 


getTitle: function() { 
return this._title; 


b 
setTitle: function(title) { 
this. title = title || “No title specified’; 


, 


getAuthor: function() { 
return this. author; 


}， 
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setAuthor: function(author) { 
this. author = author || “No author specified’; 


hj 
display: function() { 
} 
}; 
在 这 个 例子 中 ， 所 有 属性 都 已 重新 命名 。 每 个 属性 的 名 称 前 都 加 了 一 个 下 划 线 ， 表 示 它 是 私 
用 属性 。 由 于 下 划 线 在 JavaScript 中 可 以 用 作 标识 符 的 第 一 个 字符 ,所 以 它们 仍然 是 有 效 的 变量 名 。 
这 种 命名 规范 也 可 以 应 用 于 方法 。 假设 有 一 个 程序 员 在 使 用 你 的 类 时 颇 费 周折 ， 因 为 他 老 是 
WEZ “Invalid ISBN (无 效 ISBN)” 错 误 。 他 可 能 会 使 用 公用 方法 checkIsbn， 把 所 有 可 用 于 校 验 
和 位 上 的 字符 〈 只 有 10 个 ) 依次 尝试 一 遍 ， 直 到 通过 测试 ， 然 后 用 那个 结果 创建 一 个 Book 实 例 。 
你 应 该 阻止 这 种 做 法 ， 因 为 这 样 找到 的 ISBN 仍 可 能 是 无 效 的 。 为 此 你 可 以 将 这 个 方法 的 声明 从 : 


checkIsbn: function(isbn) { 


oe 
改 为 : 


_checkIsbn: function(isbn) { 


hj 

即使 如 此 ， 仍 可 能 有 程序 员 以 一 种 钻 空子 的 心态 来 使 用 这 个 函数 ， 但 他 们 是 在 无 意 之 中 用 到 
这 个 函数 的 可 能 性 很 小 。 

下 划 线 的 这 种 用 法 是 一 个 众所周知 的 命名 规范 ， 它 表明 一 个 属性 (或 方法 ) 仅 供 对 象 内 部 使 
A, 直接 访问 它 或 设置 它 可 能 会 导致 意 想不到 的 后 果 。 这 有 助 于 防止 程序 员 对 它 的 无 意 使 用 ， 却 
不 能 防止 对 它 的 有 意 使 用 。 后 一 个 目标 的 实现 需要 有 真正 私 用 性 的 方法 。 

这 种 创建 对 象 的 模式 具有 门户 大 开 型 对 象 创建 模式 的 所 有 优点 ， 而 且 比 后 者 少 了 一 个 缺 
点 。 但 是 ， 它 只 是 一 种 约定 ， 只 有 在 得 到 遵守 时 才 有 效果 ， 而 且 并 没有 什么 强制 性 手段 可 以 保 
证 这 一 点 。 所 以 它 并 不 是 真正 可 以 用 来 隐藏 对 象 内 部 数据 的 解决 方案 。 它 主要 适用 于 非 敏 感性 
的 内 部 方法 和 属性 ， 也 即 ， 那 些 因为 未 见于 公开 的 接口 ， 所 以 类 的 大 多 数 使 用 者 都 不 会 关心 的 
方法 和 属性 。 


3.2.3 ”作用 域 、 翌 套 函 数 和 闭 包 


在 讨论 真正 的 私 用 性 方法 和 属性 的 实现 技术 之 前 , 我 们 先 花 点 时 间 解 释 一 下 这 种 技术 背后 的 
原理 。 在 JavaScript 中 ， 只 有 函数 具有 作用 域 。 也 就 是 说 ， 在 一 个 函数 内 部 声明 的 变量 在 函数 外 部 
无 法 访问 。 私 用 属性 就 其 本 质 而 言 就 是 你 希望 在 对 象 外 部 无 法 访问 的 变量 ， 所 以 为 实现 这 种 拒 访 
性 而 求助 于 作用 域 这 个 概念 是 合乎 情理 的 。 定义 在 一 个 函数 中 的 变量 在 该 函数 的 内 址 函数 中 是 可 
以 访问 的 。 下 面 这 个 示例 说 明了 JavaScript 中 作用 域 的 特点 : 
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function foo() { 
var a = 10; 


function bar() { 
a 2 2; 


} 


bar(); 
return a; 


在 这 个 示例 中 ，a 定 义 在 函数 foo 中 ， 但 函数 bar 可 以 访问 它 ， 因 为 bar 也 定义 在 foo 中 。 bar 在 
执行 过 程 中 将 a 设 置 为 a 乘 以 2。 当 bar 在 foo 中 被 调用 时 它 能 够 访问 a， 这 可 以 理解 。 但 是 如 果 bar 
是 在 foo 外 部 被 调用 呢 ? 

function foo() { 


var a = 10; 


function bar() { 
a *= 2; 
return a; 


return bar; 


var baz = foo(); // baz is now a reference to function bar. 
baz(); // returns 20. 
baz(); // returns 40. 
baz(); // returns 80. 


var blat = foo(); // blat is another reference to bar. 
blat(); // returns 20, because a new copy of a is being used. 


在 上 述 代码 中 ， 所 返回 的 对 bar 函 数 的 引用 被 赋 给 变量 baz，。 这 个 函数 现在 是 在 foo 外 部 被 调 
用 ， 但 它 依然 能 够 访问 a。 这 是 因为 JavaSecript 中 的 作用 域 是 词法 性 的 。 函 数 是 运行 在 定义 它们 的 
作用 域 中 〈 本 例 中 是 foo 内 部 的 作用 域 )， 而 不 是 运行 在 调用 它们 的 作用 域 中 。 只 要 bar 被 定义 在 
foo 中 ， 它 就 能 访问 在 foo 中 定义 的 所 有 变量 ， 即 使 foo 的 执行 已 经 结束 。 

这 就 是 闭 包 的 一 个 例子 。 在 foo 返 回 后 ， 它 的 作用 域 被 保存 下 来 ， 但 只 有 它 返 回 的 那个 函数 
能 够 访问 这 个 作用 域 。 在 前 面 的 示例 中 ，baz 和 blat 各 有 这 个 作用 域 及 a 的 一 个 副本 ， 而 且 只 有 它 
们 上 自己 能 对 其 进行 修改 。 返 回 一 个 内 婴 函 数 是 创建 闭 包 最 常用 的 手段 。 


3.24 用 闭 包 实现 私 用 成 员 


现在 回 过 来 看 手头 的 那个 问题 : 你 需要 创建 一 个 只 能 在 对 象 内 部 访问 的 变量 。 闭 包 用 于 这 个 
目的 看 来 是 再 合适 不 过 了 ,因为 借助 于 闭 包 你 可 以 创建 只 允许 特定 函数 访问 的 变量 ， 而 且 这 些 变 
量 在 这 些 函 数 的 各 次 调用 之 间 依 然 存在 。 为 了 创建 私 用 属性 ， 你 需要 在 构造 器 函数 的 作用 域 中 定 
义 相关 变量 。 这 些 变量 可 以 被 定义 于 该 作用 域 中 的 所 有 函数 访问 ， 包 括 那些 特权 方法 ; 


www.TopSage.com 


3.2 创建 对 象 的 基本 模式 31 


var Book = function(newIsbn, newTitle, newAuthor) { // implements Publication 


// Private attributes. 
var isbn, title, author; 


// Private method. 
function checkIsbn(isbn) { 


a 


// Privileged methods. 

this.getIsbn = function() { 
return isbn; 

}; 

this.setIsbn = function(newIsbn) { 
if(!checkIsbn(newIsbn)) throw new Error('Book: Invalid ISBN.'); 
isbn = newIsbn; 


}3 


this.getTitle = function() { 
return title; 
} 
this.setTitle = function(newTitle) { 
title = newTitle || 'No title specified'; 
j; 


this.getAuthor = function() { 
return author; 


}; 
this.setAuthor = function(newAuthor) { 

author = newAuthor || “No author specified’; 
}; 


// Constructor code. 
this.setIsbn(newIsbn) ; 
this.setTitle(newTitle) ; 
this. setAuthor(newAuthor) ; 


}; 


// Public, non-privileged methods. 
Book.prototype = { 
display: function() { 


} 

5 
那么 这 与 我 们 先前 讲 过 的 其 他 创建 对 象 的 模式 有 什么 不 同 呢 ? 在 其 他 使 用 Book 的 例子 中 , 我 
们 在 创建 和 引用 对 象 的 属性 时 总 要 使 用 this 关 键 字 。 而 在 本 例 中 ， 我 们 用 var 声 明 这 些 变量 。 这 
意味 着 它们 只 存在 于 Book 构 造 器 中 。checkIsbn 函 数 也 是 用 同样 的 方式 声明 的 ， 因 此 成 了 一 个 私 
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用 方法 。 

需要 访问 这 些 变量 和 函数 的 方法 只 需 声 明 在 Book 中 即 可 。 这 些 方法 被 称 为 特权 方法 
(privileged method)， 因 为 它们 是 公用 方法 ， 但 却 能 够 访问 私 用 属性 和 方法 。 为 了 在 对 象 外 部 能 
访问 这 些 特 权 函 数 ， 它 们 的 前 面 都 被 加 上 了 关键 字 this。 因 为 这 些 方法 定义 于 Book 构 造 器 的 作用 
域 中 ， 所 以 它们 能 访问 到 私 用 属性 。 引 用 这 些 属性 时 并 没有 使 用 this 关 键 字 ， 因 为 它们 不 是 公开 
的 。 所 有 取 值 器 和 赋值 器 方法 都 被 改 为 不 加 this 地 直接 引用 这 些 属性 。 

任何 不 需要 直接 访问 私 用 属性 的 方法 都 可 以 像 原 来 那样 在 Book.prototype 中 声明 。 display 
就 是 这 类 方法 中 的 一 个 。 它 不 需要 直接 访问 任何 私 用 属性 ， 因 为 它 可 以 通过 调用 getIsbn 或 
getTit1e 来 进行 间接 访问 。 只 有 那些 需要 直接 访问 私 用 成 员 的 方法 才 应 该 被 设计 为 特权 方法 。 但 
特权 方法 太 多 又 会 占用 过 多 内 存 ， 因 为 每 个 对 象 实例 都 包含 了 所 有 特权 方法 的 新 副本 。 

用 这 种 方式 创建 的 对 象 可 以 具有 真正 私 用 的 属性 。 其 他 程序 员 不 可 能 直接 访问 他 们 创建 的 
Book 实 例 的 任何 内 部 数据 。 由 于 他 们 不 得 不 通过 赋值 器 方法 设置 属性 的 值 ， 所 以 属性 会 得 到 什么 
样 的 值 尽 在 你 的 掌控 之 下 。 i 

这 种 对 象 创 建 模式 解决 了 其 他 模式 中 的 所 有 问题 , 但 它 也 有 自己 的 一 些 棘 端 。 在 门户 大 开 型 
对 象 创建 模式 中 ， 所 有 方法 都 创建 在 原型 对 象 中 ， 因 此 不 管 生成 多 少 对 象 实例 ， 这 些 方法 在 内 存 
中 只 存在 一 份 。 而 采用 本 节 讨 论 的 做 法 , 每 生成 一 个 新 的 对 象 实例 都 将 为 每 一 个 私 用 方法 和 特权 
方法 生成 一 个 新 的 副本 。 这 会 比 其 他 做 法 耗费 更 多 内 存 ， 所 以 只 宜 用 在 需要 真正 的 私 用 成 员 的 场 
合 。 这 种 对 象 创建 模式 也 不 利于 派生 子 类 ， 因 为 所 派生 出 的 子 类 不 能 访问 超 类 的 任何 私 用 属性 或 
方法 。 相 比 之 下 ， 在 大 多 数 语言 中 ， 子 类 都 能 访问 超 类 的 所 有 私 用 属性 和 方法 ?。 故 在 JavaScript 
中 用 闭 包 实现 私 用 成 员 导 致 的 派生 问题 被 称 为 “继承 破坏 封装 (inheritance breaks encapsulation)”. 
如 果 你 创建 的 类 以 后 可 能 会 需要 派生 出 子 类 , 那么 最 好 还 是 采用 这 里 所 讨论 的 三 种 对 象 创建 模式 
中 的 前 两 种 。 


3.3 更 多 高 级 对 象 创 建 模式 


在 前 面 你 已 经 学 到 了 创建 对 象 的 3 种 基本 模式 ， 本 节 将 再 讨论 一 些 高 级 一 点 的 模式 。 本 书 第 2 
部 分 中 会 更 详细 地 讨论 各 种 具体 的 模式 ， 这 里 只 是 对 其 中 的 一 些 模式 作 一 个 简介 。 


3.3.1 静态 方法 和 属性 


前 面 所 讲 的 作用 域 和 闭 包 的 概念 可 用 于 创建 静态 成 员 , 包括 公用 的 和 私 用 的 。 大 多 数 方法 和 
属性 所 关联 的 是 类 的 实例 ， 而 静态 成 员 所 关联 的 则 是 类 本 身 。 换 名 话说， 静态 成 员 是 在 类 的 层次 
上 操作 ， 而 不 是 在 实例 的 层次 上 操作 。 每 个 静态 成 员 都 具有 一 份 。 你 稍 后 将 会 看 到 ， 静 态 成 员 是 
直接 通过 类 对 象 访问 的 。 


D 这 种 说 法 不 正确 。 至 少 在 Java、C++ 和 C# 这 三 种 主流 的 面向 对 象 语言 中 , 子 类 是 不 能 直接 访问 父 类 的 私 用 成 员 的 ， 
它们 只 能 直接 访问 父 类 的 公用 成 员 和 受 护 成 员 。 一 一 译 者 注 
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下 面 是 添加 了 静态 属性 和 方法 的 Book 类 : 


var Book = (function() { 


// Private static attributes. 
var numOfBooks = 0; 


// Private static method. 
function checkIsbn(isbn) { 


es 


// Return the constructor. » 
return function(newIsbn, newTitle, newAuthor) { // implements Publication 


// Private attributes. 
var isbn, title, author; 


// Privileged methods. 
this.getIsbn = function() { 
return isbn; 
}; 
this.setIsbn = function(newIsbn) { 
if(!checkIsbn(newIsbn)) throw new Error( "Book: Invalid ISBN.'); 
isbn = newlsbn; 
}; 
this.getTitle = function() { 
return title; 
}; 
this.setTitle = function(newTitle) { 
title = newTitle || “No title specified’; 
}; 


this.getAuthor = function() { 
return author; 


} 
this.setAuthor = function(newAuthor) { 

author = newAuthor || 'No author specified'; 
}; 


// Constructor code. 
numOfBooks++; // Keep track of how many Books have been instantiated 
// with the private static attribute. 
if(numOfBooks > 50) throw new Error( ‘Book: Only 50 instances of Book can be ' 
+ 'created."); 


this.setIsbn(newIsbn); 
this.setTitle(newTitle); 
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this.setAuthor(newAuthor) ; 
} 
HO; 


// Public static method. 
Book. convertToTitleCase = function(inputString) { 


: Ra 


// Public, non-privileged methods. 
Book.prototype = { 
display: function() { 


} 

}; 

这 与 3.2.4 节 中 创建 的 类 大 体 相似 , 但 也 有 一 些 重要 区 别 。 这 里 的 私 用 成 员 和 特权 成 员 仍 然 被 
声明 在 构造 器 中 (分 别 使 用 var 和 this 关 键 字 )。 但 那个 构造 器 却 从 原来 的 普通 函数 变 成 了 一 个 内 
霸 函 数 ， 并 且 被 作为 包含 它 的 函数 的 返回 值 赋 给 变量 Book 。 这 就 创建 了 一 个 闭 包 ， 你 可 以 把 静态 
的 私 用 成 员 声 明 在 里 面 。 位 于 外 层 函数 声明 之 后 的 一 对 空 括号 很 重要 ， 其 作用 是 代码 一 载 入 就 立 
即 执行 这 个 函数 〈 而 不 是 在 调用 Book 构 造 函数 时 )。 这 个 函数 的 返回 值 是 另 一 个 函数 ， 它 被 赋 给 
Book 变 量 ，Book 因 此 成 了 一 个 构造 函数 。 在 实例 化 Book 时 ， 所 调用 的 是 这 个 内 层 函数 。 外 层 那 个 
函数 只 是 用 于 创建 一 个 可 以 用 来 存放 静态 私 用 成 员 的 闭 包 。 

在 本 例 中 ，checkIsbn 被 设计 为 静态 方法 ， 原 因 是 为 Book 的 每 个 实例 都 生成 这 个 方法 的 一 个 
新 副本 毫 无 道理 。 此 外 还 有 一 个 静态 属性 num0fBooks, 其 作用 在 于 跟踪 Book 构 造 器 的 总 调用 次 数 。 
本 例 利 用 这 个 属性 将 Book 实 例 的 个 数 限制 为 不 超过 50 个 。 

这 些 私 用 的 静态 成 员 可 以 从 构造 器 内 部 访问 , 这 意味 着 所 有 私 用 函数 和 特权 函数 都 能 访问 它 
们 。 与 其 他 方法 相 比 ， 它 们 有 一 个 明显 的 优点 ， 那 就 是 在 内 存 中 只 会 存放 一 份 。 因 为 其 中 那些 静 
态 方法 被 声明 在 构造 器 之 外 , 所 以 它们 不 是 特权 方法 , 不 能 访问 任何 定义 在 构造 器 中 的 私 用 属性 。 
定义 在 构造 器 中 的 私 用 方法 能 够 调用 那些 私 用 静态 方法 , 反之 则 不 然 。 要 判断 一 个 私 用 方法 是 否 
应 该 被 设计 为 静态 方法 ， 一 条 经 验 法 则 是 看 它 是 否 需 要 访问 任何 实例 数据 。 如 果 它 不 需要 ,那么 
将 其 设计 为 静态 方法 会 更 有 效率 (从 内 存 占用 的 意义 上 来 说 )， 因 为 它 只 会 被 创建 一 份 。 

创建 公用 的 静态 成 员 则 容易 得 多 ， 只 需 直 接 将 其 作为 构造 函数 这 个 对 象 的 属性 ?创建 即 可 ， 
前 述 代码 中 的 方法 convertToTitleCase 就 是 一 例 。 这 实际 上 相当 于 把 构造 器 作为 命名 空间 来 使 用 。 


D 注意 这 里 所 说 的 属性 与 前 面 所 说 的 属性 不 是 一 个 意思 。 之 前 所 说 的 属性 在 本 注 中 表示 为 粗 体 ， 以 示 区 分 ) 大 臻 


相当 于 C++ 中 类 的 数据 成 员 而 方法 则 相当 于 C++ 中 类 的 函数 成 员 )。 实 际 上 ， 在 JavaScript 中 ， 对 和 象 是 一 组 属性 
的 无 序 集合 ， 这 些 属性 可 以 存放 各 种 类 型 的 数据 ， 如 果 一 个 属性 存放 的 数据 是 一 个 函数 ， 那 么 它 也 被 称 为 该 对 象 
的 一 个 方法 。 先 前 所 说 的 属性 实际 上 是 指 对 象 的 非 方 法 性 属性 ， 本 书 中 “属性 ”一 词 基本 上 都 用 于 这 一 含义 ， 只 
有 此 处 是 一 个 例外 (之 所 以 不 得 不 这 样 做 ， 是 因为 如 果 不 用 这 个 词 的 话 ， 很 难 既 把 这 个 句子 的 意思 表达 清楚 而 又 
不 引起 误解 )。 一 一 译 者 注 
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注解 在 JavaScript 中 ， 除 那 三 种 原始 类 型 外 ， 所 有 其 他 类 型 的 变量 都 是 对 象 (即使 是 三 种 原始 

类 型 ， 在 必要 的 时 候 也 会 被 自动 包装 为 对 象 )。 这 意味 着 函数 也 是 对 象 。 因 为 对 象 在 本 质 
上 是 一 些 散 列表 ， 所 以 任何 时 候 都 可 以 为 其 添加 成 员 。 其 结果 就 是 函数 也 可 以 像 其 他 对 
象 一 样 具 有 属性 和 方法 ， 而 且 这 些 属性 和 方法 随时 可 以 添加 . 








所 有 公用 静态 方法 如 果 作为 独立 的 函数 来 声明 其 实 也 同样 简单 , 但 最 好 还 是 像 这 样 把 相关 行 
为 集中 在 一 起 。 这 些 方法 用 于 与 类 这 个 整体 相关 的 任务 , 而 不 是 与 类 的 任 一 特定 实例 相关 的 任务 。 
它们 并 不 直接 依赖 于 对 象 实例 中 包含 的 任何 数据 。 


3.3.2 ”常量 


常量 只 不 过 是 一 些 不 能 被 修改 的 变量 。 在 JavaScript 中 , 可 以 通过 创建 只 有 取 值 器 而 没有 赋值 
器 的 私 用 变量 来 模仿 常量 。 因为 常量 往往 是 在 开发 时 进行 设置 , 而 且 不 因 对象 实 例 的 不 同 而 变化 ， 
所 以 将 其 作为 私 用 静态 属性 来 设计 是 合乎 情理 的 。 假 设 C1ass 对 象 有 一 个 名 为 UPPER_BOUND 的 常量 ， 
那么 为 获取 这 个 常量 而 进行 的 方法 调用 如 下 所 示 : 

Class .getUPPER BOUND(); 


为 了 实现 这 个 取 值 器 ， 需 要 使 用 我 们 还 未 讲 过 的 特权 静态 方法 : © 
var Class = (function)() { 

// Constants (created as private static attributes). 

var UPPER_BOUND = 100; 

// Constructor. 

var ctor = function (constructorArgument) { 


区 

// Privileged static method. 

ctor.getUPPER_BOUND = function() { 
return UPPER_BOUND; 

k 


// Return the constructor. 
return ctor; 
pO; 
如 果 需 要 使 用 许多 常量 ， 但 你 不 想 为 每 个 常量 都 创建 一 个 取 值 器 方法 ， 那 么 可 以 创建 一 个 通 
用 的 取 值 器 方法 : 
var Class = (function)() { 
// Private static attributes. 


O 原 书 下面 这 段 代 码 和 再 下 面 那 段 代码 有 严重 错误 。 我 已 经 进行 了 修改 。 一 一 译 者 注 
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var constants = { 
UPPER BOUND: 100, 
LOWER_BOUND: -100 
}; 
// Constructor. 
var ctor = function(constructorArgument) { 


k 

// Privileged static method. 

ctor. getConstant = function(name) { 
return constants[name]; 


} 


// Return the constructor. 
return ctor; 
dO; 


然后 可 以 这 样 使 用 这 个 取 值 器 以 获得 一 个 常量 : 


Class.getConstant('UPPER BOUND' ); 


3.3.3 ” 单 体 和 对 象 工厂 


其 他 还 有 一 些 模式 也 使 用 闭 包 来 创建 受 保护 的 变量 空间 。 在 这 方面 最 突出 的 两 个 是 单 体 模式 
和 工厂 模式 。 本 书后 面部 分 会 详细 讨论 这 两 种 模式 ， 因为 它们 使 用 了 本 章 中 的 概念 来 实现 信息 隐 
藏 ， 所 以 在 此 先 简要 介绍 一 下 。 

单 体 模 式 使 用 一 个 由 外 层 函 数 返回 的 对 象 字面 量 来 公开 特权 成 员 , 而 私 用 成 员 则 被 保护 性 地 
封装 在 外 层 函数 的 作用 域 中 。 它 使 用 的 技术 与 我 们 前 面 所 讲 的 一 样 : 外 层 函 数 在 定义 之 后 立即 执 
行 ， 其 结果 被 赋 给 一 个 变量 。 在 本 章 前 面 的 例子 中 外 层 函 数 返回 的 都 是 一 个 函数 ,， 而 单 体 模式 中 
外 层 函 数 返 回 的 则 是 一 个 对 象 字面 量 。 这 种 创建 受 保护 的 命名 空间 的 方法 非常 简便 和 直观 。 第 5 
章 将 对 单 体 进行 更 详细 的 讨论 。 

对 象 工厂 也 可 以 使 用 闭 包 来 创建 具有 私 用 成 员 的 对 象 。 其 最 简 形 式 就 是 一 个 类 构造 器 ,本章 
讨论 的 所 有 技术 都 可 以 用 在 上 面 。 第 7 章 详 细 讨 论 了 工厂 模式 。 


3.4 封装 之 利 


要 是 创建 对 象 时 不 用 操心 闭 包 和 特权 方法 这 些 东 西 , 事情 会 简单 得 多 。 在 一 个 理想 的 世界 里 ， 
所 有 方法 都 可 以 是 公开 的 ， 而 其 他 程序 员 只 会 使 用 接口 中 规定 的 那些 方法 。 那么 ,不厌其烦 地 隐 
藏 实现 细节 究竟 能 为 你 带 来 什么 好 处 呢 ? 

封装 保护 了 内 部 数据 的 完整 性 。 通 过 将 数据 的 访问 途径 限制 为 取 值 器 和 赋值 器 这 两 个 方法 ， 
可 以 获得 对 取 值 和 赋值 的 完全 控制 。 这 可 以 减少 其 他 函数 所 需 的 错误 检查 代码 的 数量 ， 并 确保 数 
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据 不 会 处 于 无 效 状态 。 另 外 ， 对 象 的 重 构 因 此 可 以 变 得 更 轻松 。 因 为 用 户 不 知道 对 象 的 内 部 细 
节 ， 所 以 你 可 以 随心 所 欲 地 修改 对 象 内 部 使 用 的 数据 结构 和 算法 ， 对 此 外 人 不 会 知道 ， 他 们 也 
不 必 知 道 。 

通过 只 公开 那些 在 接口 中 规定 的 方法 ， 可 以 弱化 模块 间 的 耦合 。 这 是 面向 对 象 设计 最 重要 的 
原则 之 一 。 尽 可 能 地 提高 对 象 的 独立 性 可 以 带 来 很 多 好 处 。 它 提高 了 对 象 的 可 重用 性 ， 使 其 在 必 
要 的 时 候 可 以 被 替换 。 使 用 私 用 变量 也 有 助 于 避免 命名 空间 冲突 。 如 果 一 个 变量 在 代码 中 其 他 地 
方 都 不 能 被 访问 ， 你 就 不 用 老 是 担心 它 是 否 与 程序 中 其 他 地 方 的 对 象 或 函数 重 名 并 因此 造成 问 
题 。 封 装 还 使 你 可 以 大 幅 改动 对 象 的 内 部 细节 ， 而 不 会 影响 到 其 他 部 分 的 代码 。 总 的 来 说 ， 代 码 
的 修改 变 得 更 轻松 , 因为 你 对 它 所 带 来 的 影响 已 经 了 如 指 掌 。 如 果 对 象 的 内 部 数据 都 是 公开 的 话 ， 
你 不 可 能 完全 清楚 代码 的 修改 会 带 来 什么 结果 。 


3.5 Hz 


私 用 方法 很 难 进行 单元 测试 。 因为 它们 及 其 内 部 变量 都 是 私 用 的 ， 所 以 在 对 象 外 部 无 法 访问 
到 它们 。 这 个 问题 没有 什么 很 好 的 应 对 之 策 。 你 要 么 通过 使 用 公用 方法 来 提供 访问 途径 (这样 一 
来 就 葬送 了 使 用 私 用 方法 所 带 来 的 大 多 数 好 处 ), 要 么 设法 在 对 象 内 部 定义 并 执行 所 有 单元 测试 。 
最 好 的 解决 办 法 是 只 对 公用 方法 进行 单元 测试 。 这 应 该 能 覆盖 到 所 有 私 用 方法 ,尽管 对 它们 的 测 
试 只 是 间接 的 。 这 种 问题 不 是 JavaScript 所 独 有 的 , 只 对 公用 方法 进行 单元 测试 是 一 种 广 为 接 受 的 
处 理 方式 。 

使 用 封装 意味 着 不 得 不 与 复杂 的 作用 域 链 打 交道 ,而 这 会 使 错误 调试 更 加 困难 。 一 般 说 来 这 
不 算 什么 大 问题 , 但 有 时 候 你 会 很 难 区 分 来 自 不 同 作用 域 的 大 批 同名 变量 。 这 个 问题 不 是 经 过 圭 
装 的 对 象 所 特有 的 ， 但 实现 私 用 方法 和 属性 所 需 的 闭 包 会 让 它 变 得 更 加 复杂 。 

过 度 封装 也 是 一 个 潜在 的 问题 。 如 果 你 对 其 他 程序 员 对 你 的 类 的 需求 了 解 得 并 不 透彻 ,那么 
对 防止 他 们 修改 类 的 内 部 细节 的 热衷 可 能 会 过 于 严厉 。 预 测 人 们 会 怎样 使 用 你 的 代码 并 不 容易 。 
封装 可 能 会 损害 类 的 灵活 性 ， 致 使 其 无 法 被 用 于 某 些 你 未 曾 想 到 过 的 目的 。 

最 大 的 问题 在 于 JavaScript 中 实现 封装 的 困难 。 其 实现 过 程 需要 用 到 的 一 些 复杂 对 象 模式 对 
于 大 多 数 编程 新 手 而 言 太 不 直观 。JavaScript 本 来 就 是 一 门 与 多 数 面 向 对 象 语言 大 相 径 庭 的 语 
言 ,而 封装 技术 涉及 的 调用 链 和 定义 后 立即 执行 的 匿名 函数 等 概念 更 是 加 大 了 学 习 难 度 。 此 外 ， 
封装 技术 的 应 用 还 使 不 熟悉 特定 模式 的 人 难以 理解 既 有 代码 。 注 释 和 程序 文档 可 以 提供 一 些 帮 
助 ， 但 并 不 能 完全 解决 这 个 问题 。 如 果 你 想 使 用 这 些 模式 ， 那 么 应 该 确保 与 你 合作 的 其 他 程序 
员 也 理解 它们 。 


3.6 sg 


本 章 讨论 了 信息 隐藏 的 概念 以 及 如 何 用 封装 这 种 手段 来 实现 它 。 因 为 JavaScript 没 有 对 封装 
提供 内 置 的 支持 ， 所 以 其 实现 必须 依赖 于 一 些 其 他 技术 。 如 果 能 够 确信 其 他 程序 员 只 会 使 用 接 
口中 规定 的 方法 ， 或 者 并 非 迫 切 需 要 保持 内 部 数据 的 完整 性 ， 那 就 可 以 使 用 门户 大 开 型 对 象 。 
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命名 规范 可 以 用 来 引导 其 他 程序 员 ， 使 其 明白 哪些 方法 是 不 宜 直 接 访问 的 内 部 方法 。 如 果 需 

要 真正 的 私 用 成 员 ， 那 就 只 能 使 用 闭 包 了 。 通 过 创建 一 个 受 保护 的 变量 空间 ， 可 以 实现 公用 、 

私 用 和 特权 成 员 ， 以 及 静态 类 成 员 和 常量 。 本 书后 面 的 多 数 章节 都 依赖 于 这 些 基本 技术 ， 因 

此 它们 值得 反复 玩味 一 下 。 只 要 理解 了 JavaScript 中 作用 域 的 特点 ， 你 就 能 模仿 出 各 种 面向 对 
[40] 象 的 技术 。 
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任何 面向 对 象 的 语言 中 的 继承 都 复杂 
Pie a 与 它们 


i he 上 
不 同 , 在 JavaScript 中 要 想 达 到 4 列 措施 。 更 有 甚 者 ，JavaScript 


cramer a EAR a 得 益 于 这 种 
语言 的 灵活 性 ， AEP = FAL BEY 二 些 《 但 也 可 能 更 有 效 一 些 ) 


oe LUPO 以 及 它们 的 适用 场合 。 


4.1 为 什么 需要 继承 


在 开始 实际 摆弄 代码 之 前 ， 我 们 先 得 搞 清 使 用 继承 能 带 来 什么 好 处 。 一 般 说 来 ， 在 设计 类 的 
时 候 ， 我 们 希望 能 减少 重复 性 的 代码 ， 并 且 尽 量 弱化 对 象 间 的 耦合 。 使 用 继承 符合 前 一 个 设计 原 
则 的 需要 。 借 助 这 种 机 制 , 你 可 以 在 现 有 类 的 基础 上 进行 设计 并 充分 利用 它们 已 经 具备 的 各 种 方 
法 ， 而 对 设计 进行 修改 也 更 为 轻松 。 假 设 你 需要 让 几 个 类 都 拥有 一 个 按 特定 方式 输出 类 结构 的 
tostring 方 法 ， 当 然 可 以 用 复制 加 粘贴 的 办 法 把 定义 toString 方 法 的 代码 添加 到 每 一 个 类 中 ， 但 
这 样 做 的 话 ， 每 当 需 要 改变 这 个 方法 的 工作 方式 时 ， 你 将 不 得 不 在 每 一 个 类 中 重复 同样 的 修改 。 
反之， 如 果 你 先 创建 一 个 ToStringProvider 类 ， 然 后 让 那些 类 继承 这 个 类 ， 那 么 tostring 这 个 方 
法 只 需 在 一 个 地 方 声明 即 可 。 

让 一 个 类 继承 另 一 个 类 可 能 会 导致 二 者 产生 强 耦 合 ， 也 即 一 个 类 依赖 于 另 一 个 类 的 内 部 
实现 。 我 们 将 讨论 一 些 有 助 于 避免 这 种 问题 的 技术 ， 其 中 包括 用 挫 元 类 为 其 他 类 提供 方法 这 
种 技术 。 


4.2 类 式 继承 


JavaScript 可 以 被 装扮 成 使 用 类 式 继承 的 语言 。 通 过 用 函数 来 声明 类 、 用 关键 字 new 来 创建 实 
例 ，JavaScript 中 的 对 象 也 能 惟妙惟肖 地 模仿 Java 或 C++ 中 的 对 象 。 下 面 是 JavaScript 中 一 个 简单 的 
类 声明 : 


eat 继承 是 一 
Laz 在 大 多 数 其 他 
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/* Class Person. */ 


function Person(name) { 
this.name = name; 


} 


Person.prototype.getName = function() { 
return this.name; 


首先 要 做 的 是 创建 构造 函数 。 按 惯例 ， 其 名 称 就 是 类 名 ， 首 字母 应 大 写 。 在 构造 函数 中 ， 
创建 实例 属性 要 使 用 关键 字 this。 类 的 方法 则 被 添加 到 其 prototype 对 象 中 ， 就 像 例 中 的 
Person.prototype.getName 屠 样 。 要 创建 该 类 的 实例 ， 只 需 结合 关键 字 new 调 用 这 个 构造 函数 
即 可 : 


var reader = new Person('John Smith'); 
reader.getName( ); 


然后 你 可 以 访问 所 有 的 实例 属性 , 也 可 以 调用 所 有 的 实例 方法 。 这 是 JavaScript 中 一 个 非常 简 
单 的 类 的 例子 。 


4.2.1 原型 链 
创建 继承 Person 的 类 则 要 复杂 一 些 ; 


/* Class Author. */ 


function Author(name, books) { 
Person.call(this, name); // Call the superclass's constructor in the scope of this. 
this.books = books; // Add an attribute to Author. 


Author.prototype = new Person(); // Set up the prototype chain. 
Author.prototype.constructor = Author; // Set the constructor attribute to Author. 
Author.prototype.getBooks = function() { // Add a method to Author. 

return this.books; 


让 一 个 类 继承 另 一 个 类 需要 用 到 许多 行 代码 (不 像 大 多 数 别 的 面向 对 象 的 语言 中 那样 只 用 一 
个 关键 字 extend 即 可 )。 首 先 要 做 的 是 像 前 一 个 示例 中 那样 创建 一 个 构造 函数 。 在 构造 函数 中 ， 
调用 超 类 的 构造 函数 ， 并 将 name 参 数 传 给 它 。 这 行 代码 需要 解释 一 下 。 在 使 用 new 运 算 符 的 时 候 ， 
系统 会 为 你 做 一 些 事 。 它 先 创建 一 个 空 对 象 ， 然 后 调用 构造 函数 ， 在 此 过 程 中 这 个 空 对 象 处 于 作 
用 域 链 的 最 前 端 。 而 在 Author 函 数 中 调用 超 类 的 构造 函数 时 ， 你 必须 手工 完成 同样 的 任务 。 
“Person.call(this, name)” 这 条 语句 调用 了 Person 构 造 函 数 ， 并 且 在 此 过 程 中 让 那个 空 对 象 (用 
this 代 表 ) 处 于 作用 域 链 的 最 前 端 ， 而 name 则 被 作为 参数 传 入 。 

下 一 步 是 设置 原型 链 。 尽 管 相关 代码 比较 简单 ， 但 这 实际 上 是 一 个 非常 复杂 的 话题 。 前 面 已 
经 说 过 ，JavaScript 没 有 extend 关 键 字 。 但 是 在 JavaScript 中 每 个 对 象 都 有 一 个 名 为 prototype 的 属 
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性 ， 这 个 属性 要 么 指向 另 一 个 对 象 ， 要 么 是 nu119?。 在 访问 对 象 的 某 个 成 员 时 (比如 reader. 
getName)， 如 果 这 个 成 员 未 见于 当前 对 象 ， 那 么 JavaScript 会 在 prototype 属 性 所 指 的 对 象 89 中 查找 
它 。 如 果 在 那个 对 象 中 也 没有 找到 ,那么 JavaScript 会 沿 着 原型 链 向 上 逐一 访问 每 个 原型 对 象 , 直 
到 找到 这 个 成 员 ( 或 已 经 查 过 原型 链 最 顶端 的 0bject.prototype 对 象 )。 这 意味 着 为 了 让 一 个 类 继 
承 另 一 个 类 ， 只 需 将 子 类 的 prototype 设 置 为 指向 超 类 的 一 个 实例 即 可 。 这 与 其 他 语言 中 的 继承 
机 人 制 角 然 不 同 ， 可 能 会 非常 令 人 费解 ， 而 且 有 违 直 觉 。 

为 了 让 Author 继 承 Person， 必 须 手 工 将 Author 的 prototype 设 置 为 Person 的 一 个 实例 。 最 后 一 
个 步骤 是 将 prototype 的 constructor 属 性 重 设 为 Author (因为 把 prototype 属 性 设置 为 Person 的 实 
例 时 ， 其 constructor 属 性 被 抹 除 了 ) ®。 

尽管 本 例 中 为 实现 继承 需要 额外 使 用 三 行 代码 , 但 是 创建 这 个 新 的 子 类 的 实例 与 创建 Person 
的 实例 没什么 不 同 : 

var author = []; 


author[0] = new Author( ‘Dustin Diaz', ['JavaScript Design Patterns']); 
author[1] = new Author('Ross Harmes', [' JavaScript Design Patterns’ ] ); 


author[1].getName() ; 
author[1].getBooks(); 


由 此 可 见 ， 类 式 继承 的 所 有 复杂 性 只 限于 类 的 声明 ， 创 建新 实例 的 过 程 仍然 很 简单 。 
4.2.2 extend 函数 


为 了 简化 类 的 声明 ， 可 以 把 派生 子 类 的 整个 过 程 包装 在 一 个 名 为 extend 的 函数 中 。 它 的 作用 
与 其 他 语言 中 的 extend 关 键 字 类 似 ， 即 基于 一 个 给 定 的 类 结构 创建 一 个 新 的 类 ; 


/* Extend function. */ 


function extend(subClass, superClass) { 
var F = function() {}; 
F.prototype = superClass.prototype; 
subClass.prototype = new F(); 


D 这 种 说 法 并 不 正确 。 每 个 对 象 都 有 一 个 原型 对 象 ， 但 这 并 不 意味 着 每 个 对 象 都 有 一 个 prototype 属 性 【实际 上 只 
有 函数 对 象 才 有 这 个 属性 )。 在 创建 一 个 对 象 时 ，JavaScript 会 自动 将 其 原型 对 象 设置 为 其 构造 函数 的 prototype 属 
性 记 指 的 对 象 。 应 该 注意 的 是 ， 构 造 函 数 本 身 也 是 一 个 对 象 ， 它 也 有 自己 的 原型 对 象 ， 但 这 个 原型 对 象 并 不 是 它 
的 prototype 属 性 所 指向 的 那个 对 象 。 函 数 作为 一 个 对 象 ， 其 构造 函数 是 Function。 因 此 ， 构 造 函数 的 原型 对 象 实 
际 上 是 Function.prototype 所 指 的 对 象 。 关 于 原型 对 象 的 详细 说 明 ， 参见 Flanagan 所 著 《JavaScript 权 威 指南 》 一 
书 9.2 节 。 一 一 译 者 注 

© 由 于 前 一 注释 中 所 说 的 原因 ， 这 里 所 说 的 “prototype 属 性 所 指 的 对 象 ”应 该 改称 “其 原型 对 象 "。 后 面 出 现 的 类 
似 问题 将 直接 在 文中 修改 ， 不 再 用 译注 的 形式 注 明 。 后 文中 如 果 说 “prototype 对 象 ”， 指 的 是 prototype 属 性 所 指 
的 对 象 ， 如 果 说 “原型 对 象 ” 则 是 指 一 个 对 象 的 原型 对 象 。 一 一 译 者 注 

© 定义 一 个 构造 函数 时 ， 其 默认 的 prototype 对 象 是 一 个 Object 类 型 的 实例 ， 其 constructor 属 性 会 被 自动 设置 为 该 
构造 函数 本 身 。 如 果 手 工 将 其 prototype 设 置 为 另 一 个 对 象 ， 那么 新 对 象 自 然 不 会 具有 原 对 象 的 constructor 值 ， 
所 以 需要 重新 设置 其 constructor 属 性 。 一 一 译 者 注 
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subClass.prototype.constructor = subClass; 


} 
这 个 函数 所 做 的 事 与 先前 我 们 手工 做 的 一 样 。 它 设置 了 prototype， 然 后 再 将 其 constructor 
重 设 为 恰当 的 值 。 作 为 一 项 改进 ， 它 添加 了 一 个 空 函数 F， 并 将 用 它 创建 的 一 个 对 象 实例 插入 原 
型 链 中 。 这 样 做 可 以 避免 创建 超 类 的 新 实例 ， 因 为 它 可 能 会 比较 庞大 ,而 且 有 时 超 类 的 构造 函数 
有 一 些 副 作用 ， 或 者 会 执行 一 些 需 要 进行 大 量 计算 的 任务 。 
使 用 了 extend 函 数 后 ， 前 面 那 个 Person/Author 例 子 变 成 了 这 个 样子 : 


/* Class Person. */ 


function Person(name) { 
this.name = name; 


} 


Person.prototype.getName = function() { 
return this.name; 


} 
/* Class Author. */ 


function Author(name, books) { 
Person.call(this, name); 
this.books = books; 


extend(Author, Person); 


Author.prototype.getBooks = function() { 
return this.books; 


本 例 不 像 先前 那样 手工 设置 prototype 和 constructor 属 性 ， 而 是 通过 在 类 声明 之 后 (在 向 
prototype 添 加 任何 方法 之 前 ) 立即 调用 extend 函 数 来 达到 同样 的 目的 5 唯一 的 问题 是 超 类 
(Person) 的 名 称 被 固化 在 了 Author 类 的 声明 之 中 。 更 好 的 做 法 是 像 下 面 这 样 用 一 种 更 具 普 适 性 
的 的 方式 来 引用 父 类 ; 


/* Extend function, improved. */ 


function extend(subClass, superClass) { 
var F = function() {}; 
F.prototype = superClass.prototype; 
subClass.prototype = new F(); 
subClass.prototype.constructor = subClass; 


subClass.superclass = superClass.prototype; 
if(superClass.prototype.constructor == Object.prototype.constructor) { 
superClass.prototype.constructor = superClass; 
} 
} 
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这 个 版 本 要 长 一 点 ， 它 提供 了 superc1lass 属 性 ， 这 个 属性 可 以 用 来 弱化 Author 与 Pearson 之 间 
的 耦合 。 该 函数 的 前 面 4 行 与 前 一 版 本 相同 。 它 的 最 后 3 行 代 码 则 用 来 确保 超 类 的 constructor 属 
性 "已 被 正确 设置 〈 即 使 超 类 就 是 0bject 类 本 身 )， 在 用 这 个 新 的 superc1ass 属 性 调用 超 类 的 构造 
函数 时 这 个 问题 很 重要 : 

/* Class Author. */ 

function Author(name, books) { 


Author. superclass.constructor.call(this, name); 
. this.books = books; 


extend(Author, Person); 


Author.prototype.getBooks = function() { 
return this.books; 
j; 
有 了 superclass 属 性 , 就 可 以 直接 调用 超 类 中 的 方法 。 这 在 既 要 重 定义 超 类 的 某 个 方法 而 又 想 访 
问 其 在 超 类 中 的 实现 时 可 以 派 上 用 场 。 例 如 ， 为 了 用 一 个 新 的 getName 方 法 重 定义 Person 类 中 的 同名 
方法 ， 你 可 以 先 用 Author .superc1ass.getName 获 得 作者 的 名 字 ， 然 后 在 此 基础 上 添加 其 他 信息 ; 


Author.prototype.getName = function() { 
var name = Author.superclass.getName.call(this); 
return name + ', Author of ' + this.getBooks().join(', '); 


}; 


4.3 原型 式 继承 


原型 式 继承 与 类 式 继承 截然 不 同 。 我 们 发 现在 谈 到 它 的 时 候 ， 最 好 忘掉 自己 关于 类 和 实例 的 
一 切 知识 ， 只 从 对 象 的 角度 来 思考 。 用 基于 类 的 办 法 来 创建 对 象 包括 两 个 步骤 : 首先 ， 用 一 个 类 
的 声明 定义 对 象 的 结构 ; 第 二 ， 实 例 化 该 类 以 创建 一 个 新 对 象 。 用 这 种 方式 创建 的 对 象 都 有 一 套 
该 类 的 所 有 实例 属性 的 副本 。 每 一 个 实例 方法 都 只 存在 一 份 , 但 每 个 对 象 都 有 一 个 指向 它 的 链接 。 

使 用 原型 式 继承 时 ， 并 不 需要 用 类 来 定义 对 象 的 结构 ， 只 需 直接 创建 一 个 对 象 即 可 。 这 个 对 
象 随后 可 以 被 新 的 对 象 重用 , 这 得 益 于 原型 链 查 找 的 工作 机 制 。 该 对 象 被 称 为 原型 对 象 (prototype 
object), 这 是 因为 它 为 其 他 对 象 应 有 的 模样 提供 了 一 个 原型 。 这 正 是 原型 式 继承 这 个 名 称 的 由 来 。 

下 面 我 们 将 使 用 原型 式 继承 来 重新 设计 Person 和 Author: 

/* Person Prototype Object. */ 

var Person = { 

name: ‘default name’, 


getName: function() { 
return this.name; 


} 
}; 
© 严格 地 说 ， 是 超 类 的 prototype 的 constructor 属 性 。 一 一 译 者 注 
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这 里 并 没有 使 用 一 个 名 为 Person 的 构造 函数 来 定义 类 的 结构 ，Person 现 在 是 一 个 对 象 字 面 
量 。 它 是 所 要 创建 的 其 他 各 种 类 Person 对 象 的 原型 对 象 。 其 中 定义 了 所 有 类 person 对 象 都 要 具备 
的 属性 和 方法 ， 并 为 它们 提供 了 默认 值 。 方 法 的 默认 值 可 能 不 会 被 改变 ， 而 属性 的 默认 值 一 般 都 

var reader = clone(Person); 

alert(reader.getName()); // This will output ‘default name’. 


reader.name = ‘John Smith'; 
alert(reader.getName()); // This will now output "John Smith’. 


clone 函 数 ( 稍 后 在 4.3.2 节 中 会 详细 说 明 ) 可 以 用 来 创建 新 的 类 Person 对 象 。 它 会 创建 一 个 空 
对 象 , 而 该 对 象 的 原型 对 象 被 设置 成 为 person。 这 意味 着 在 这 个 新 对 象 中 查找 某 个 方法 或 属性 时 ， 
如 果 找 不 到 ， 那 么 查找 过 程 会 在 其 原型 对 象 中 继续 进行 。 

你 不 必 为 创建 Author 而 定义 一 个 Person 的 子 类 ， 只 要 执行 一 次 克隆 即 可 : 


/* Author Prototype Object. */ 


var Author = clone(Person); 

Author.books = []; // Default value. 

Author.getBooks = function() { 
return this.books; 


} 

然后 你 可 以 重 定义 该 克隆 中 的 方法 和 属性 。 可 以 修改 在 Person 中 提供 的 默认 值 ， 也 可 以 添加 
新 的 属性 和 方法 。 这样 一 来 就 创建 了 一 个 新 的 原型 对 象 , 你 可 以 将 其 用 于 创建 新 的 类 Author 对 象 ; 

var author = []; 

author[0] = clone(Author); 


author[0].name = ‘Dustin Diaz'; 
author[0].books = ['JavaScript Design Patterns' ]; 


author[1] = clone(Author); 
author[1].name = ‘Ross Harmes’; 
author[1].books = ['JavaScript Design Patterns' ]; 


author[1].getName(); 
author[1].getBooks(); 


4.3.1 对 继承 而 来 的 成 员 的 读 和 写 的 不 对 等 性 


前 面 说 过 ， 为 了 有 效 地 使 用 原型 式 继承 ， 你 必须 忘记 有 关 类 式 继承 的 一 切 。 这 里 就 是 一 个 例 
子 。 在 类 式 继承 中 ，Author 的 每 一 个 实例 都 有 一 份 自己 的 books 数 组 副本 。 你 可 以 用 代码 
author[1].books.push( "New Book Title' ) 为 其 添加 元 素 。 但 是 对 于 使 用 原型 式 继承 方式 创建 的 类 
Author 对 象 来 说 ， 由 于 原型 链接 的 工作 方式 ， 这 种 做 法 并 非 一 开始 就 能 行 得 通 。 一 个 克隆 并 非 其 
原型 对 象 的 一 份 完 全 独立 的 副本 ， 它 只 是 一 个 以 那个 对 象 为 原型 对 象 的 空 对 象 而 已 。 克 隆 刚 被 创 
建 时 ，author[1].name 其 实 是 一 个 返 指 最 初 的 Pearson name 的 链接 。 对 于 从 原型 对 象 继 承 而 来 的 成 
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fA, 其 读 和 写 具 有 内 在 的 不 对 等 性 。 在 读 取 author[1].name 的 值 时 , 如 果 你 还 没有 直接 为 author[1] 
实例 定义 name 属 性 的 话 ， 那 么 所 得 到 的 是 其 原型 对 象 的 同名 属性 值 。 而 在 写 入 author[1].name 的 
值 时 ， 你 是 在 直接 为 author[1] 对 象 定义 一 个 新 属性 。 
下 面 这 个 示例 显示 了 这 种 不 对 等 性 : 
var authorClone = clone(Author); 
alert(authorClone.name); // Linked to the primative Person.name, which is the 
// string ‘default name’. 
authorClone.name = ‘new name’; // A new primative is created and added to the 
// authorClone object itself. 
alert(authorClone.name); // Now linked to the primative authorClone.name, which 
// is the string ‘new name’. 


authorClone. books .push( 'new book’); // authorClone.books is linked to the array 
// Author.books. We just modified the 
// prototype object's default value, and all 
// other objects that link to it will now 
// have a new default value there. 
authorClone.books = []; // A new array is created and added to the authorClone 
// object itself. 

authorClone.books.push('new book’); // We are now modifying that new array. 

这 也 说 明了 为 什么 必须 为 通过 引用 传递 的 数据 类 型 的 属性 创建 新 副本 。 在 上 面 的 例子 中 ， 向 
authorClone.books 数 组 添加 新 元 素 实 际 上 是 把 这 个 元 素 添加 到 Author .books 数 组 中 。 这 可 不 是 什 
么 好 事 ， 因 为 你 对 那个 值 的 修改 不 仅 会 影响 到 Author， 而 且 会 影响 到 所 有 继承 了 Author 但 还 未 改 
写 那个 属性 的 默认 值 的 对 象 。 在 改变 所 有 那些 数组 和 对 象 的 成 员 之 前 , 必须 先 为 其 创建 新 的 副本 。 
稍 不 留神 ， 你 可 能 就 会 忘记 这 个 问题 并 改动 原型 对 象 的 值 。 这 种 错误 必须 尽量 避免 ， 因 为 这 类 问 
题 调试 起 来 会 非常 费时 。 在 这 类 场合 中 ， 可 以 使 用 hasOwnProperty 方 法 来 区 分 对 象 的 实际 成 员 和 
它 继承 而 来 的 成 员 。 

有 时 原型 对 象 自己 也 含有 子 对 象 。 如 果 想 覆盖 其 子 对 象 中 的 一 个 属性 值 ， 你 不 得 不 重新 创建 
整个 子 对 象 。 这 可 以 通过 将 该 子 对 象 设置 为 一 个 空 对 象 字 面 量 ， 然 后 对 其 进行 重 塑 而 办 到 。 但 这 
意味 着 克隆 出 来 的 对 象 必须 知道 其 原型 对 象 的 每 一 个 子 对 象 的 确切 结构 和 默认 值 .为 了 尽量 弱化 
对 象 之 间 的 耦合 ， 任 何 复杂 的 子 对 象 都 应 该 使 用 方法 来 创建 : 


var CompoundObject = { 
string1: ‘default value’, 
childObject: { 
bool: true, 
num: 10 
} | 
! 
var compoundObjectClone = clone(CompoundObject); 


// Bad! Changes the value of CompoundObject.childObject.num. 
compoundObjectClone.childObject.num = 5; 


www.TopSage.com 


46 第 4 章 k OR 


// Better. Creates a new object, but compoundObject must know the structure 
// of that object, and the defaults. This makes CompoundObject and 
// compoundObjectClone tightly coupled. 
compoundObjectClone.childObject = { 
bool: true, 
num: 5 
}; 
在 这 个 例子 中 ， 为 compound0bjectClone 对 象 新 添 了 一 个 child0bject 属 性 ， 并 修改 了 它 所 指 
向 的 对 象 的 num 属 性 。 问 题 在 于 compound0bjectClone 必 须知 道 childobject 具 有 两 个 默认 值 分 别 为 
true 和 10 的 属性 。 更 好 的 办 法 是 用 一 个 工厂 方法 来 创建 chi1d0bject: 


// Best approach. Uses a method to create a new object, with the same structure and 
// defaults as the original. 


var CompoundObject = {}; 
CompoundObject.string1 = ‘default value’, 
CompoundObject.createChildObject = function() { 
return { 
bool: true, 
num: 10 
} 
}; 
CompoundObject.childObject = CompoundObject.createChildObject(); 


var compoundObjectClone = clone(CompoundObject); 
compoundObjectClone.childObject = CompoundOb ject .createChildObject(); 
compoundObjectClone.childObject.num = 5; 


4.3.2 clone 函数 
在 前 面 的 例子 中 用 来 创建 克隆 对 象 的 奇妙 函数 究竟 是 个 什么 样子 呢 ? 答案 如 下 : 


/* Clone function, */ 


function clone(object) { 
function F() {} 
F.prototype = object; 
return new F; 


} 

Clone 函数 首 先 创建 了 一 个 新 的 空 函 数 F， 然 后 将 F 的 prototype 属 性 设置 为 作为 参数 object 传 
入 的 原型 对 象 。 由 此 可 以 体会 到 JavaScript 最 初 的 设计 者 的 用 意 。prototype 属 性 就 是 用 来 指向 原 
型 对 象 的 ， 通 过 原型 链接 机 制 ， 它 提供 了 到 所 有 继承 而 来 的 成 员 的 链接 。 该 函数 最 后 通过 把 new 
运算 符 作 用 于 F 创 建 出 一 个 新 对 象 %， 然 后 把 这 个 新 对 象 作为 返回 值 返 回 。 函数 所 返回 的 这 个 克隆 
结果 是 一 个 以 给 定 对 象 为 原型 对 象 的 空 对 象 。 


@ new .F 相 当 于 new F()。 一 一 译 者 注 
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4.4 类 式 继 承 和 原型 式 继承 的 对 比 


类 式 继 承 和 原型 式 继承 是 大 相 径 庭 的 两 种 继承 范 型 ， 它 们 生成 的 对 象 也 有 不 同 的 行为 方式 。 
两 种 继承 范 型 都 各 有 其 优 缺 点 ， 为 了 判断 在 特定 场合 下 应 该 使 用 哪 一 种 ， 你 需要 对 此 有 所 了 解 。 

包括 JavaScript 程 序 员 在 内 的 整个 程序 员 群 体 对 类 式 继承 都 比较 熟悉 .几乎 所 有 用 面向 对 象 方 
式 编写 的 JavaScript 代 码 中 都 用 到 了 这 种 继承 范 型 。 如 果 你 设计 的 是 一 个 供 众 人 使 用 的 API， 或 者 
可 能 会 有 不 熟悉 原型 式 继承 的 其 他 程序 员 基 于 你 的 代码 进行 设计 ， 那 么 最 好 还 是 使 用 类 式 继承 。 
在 各 种 流行 语言 中 只 有 JavaScript 使 用 原型 式 继承 , 因此 可 能 很 多 人 从 来 没有 用 过 这 种 继承 。 而 对 
象 具 有 到 自己 的 原型 对 象 的 反 向 链接 ， 这 也 是 一 个 令 人 困惑 的 机 制 。 那 些 没有 完全 理解 原型 式 继 
承 的 程序 员 会 把 它 视 为 某 种 反 向 继承 ， 即 父 类 继承 子 类 。 即 使 事实 并 非 如 此 ， 原 型 式 继承 仍然 会 
是 一 个 令 人 费解 的 话题 , 但 是 , 因为 JavaScript 中 的 类 式 继承 仅仅 是 对 真正 基于 类 的 继承 的 一 种 模 
仿 , 所 以 那些 高 级 JavaScript 程 序 员 总 有 一 天 需要 懂得 原型 式 继承 的 工作 机 制 。 有 人 认为 隐瞒 这 一 
ASE ICSE TE MEK FA 
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性 和 方法 的 唯一 一 份 实例 ， 只 有 在 直接 设置 了 某 个 克隆 出 来 的 对 象 的 属性 和 方法 时 ， 情 况 才 会 有 
.所 变化 。 与 此 相 比 ， 在 类 式 继承 方式 中 创建 的 每 一 个 对 象 在 内 存 中 都 有 自己 的 一 套 属性 《和 私 用 
方法 ) 的 副本 。 原 型 式 继承 在 这 方面 的 节约 效果 很 突出 。 这 种 继承 也 比 类 式 继承 显得 更 为 简练 ， 
它 只 用 到 了 一 个 clone 函 数 ， 不 像 后 者 那样 需要 为 每 一 个 想 扩展 的 类 写 上 好 几 行 像 
SuperClass.call(this，arg) 和 SubClass.prototype = new SuperClass 这 样 的 星 涩 代码 (当然 ， 这 
几 行 代码 中 的 一 部 分 也 可 以 被 塞 到 extend 函 数 中 )。 不 要 把 原型 式 继承 的 简洁 看 作 是 简陋 ， 它 的 
力量 蕴涵 在 其 简洁 性 之 中 。 

该 使 用 类 式 继承 还 是 原型 式 继承 也 许 主要 还 是 取决 于 你 更 喜欢 哪 种 范 型 。 有 些 人 似乎 天 生 就 
容易 被 原型 式 继承 的 简洁 性 吸引 ， 而 另 一 些 人 却 对 更 面 熟 的 类 式 继承 情 有 独 钟 。 本 书 介 绍 的 每 一 
种 设计 模式 中 都 可 以 使 用 这 两 种 继承 范 型 。 为 了 便于 理解 ,在 讲述 后 面 的 设计 模式 时 我 们 主要 使 
用 类 式 继承 ， 但 这 两 种 继承 范 型 在 整 本 书 中 都 是 可 以 互 换 使 用 的 。 


4.5 ”继承 与 封装 


在 本 章 中 到 目前 为 止 基本 没 提 到 过 封装 对 继承 的 影响 。 从 现 有 的 类 派生 出 一 个 子 类 时 ， 只 有 
公用 和 特权 成 员 会 被 承袭 下 来 。 这 与 其 他 面向 对 象 语言 中 的 情况 类 似 。 以 Java 为 例 ， 其 子 类 就 无 
法 访问 到 父 类 的 私 用 方法 ;为 了 将 一 个 方法 遗传 给 子 类 ， 必 须 在 定义 它 时 使 用 关键 字 protected。 

由 于 这 个 原因 ， 门户 大 开 型 类 是 最 适合 于 派生 子 类 的 。 它 们 的 所 有 成 员 都 是 公开 的 ， 因 此 可 
以 被 遗传 给 子 类 。 如 果 某 个 成 员 需 要 稍 加 隐藏 ， 你 可 以 使 用 下 划 线 符号 规范 。 

在 派生 具有 真正 的 私 用 成 员 的 类 时 ， 因 为 其 特权 方法 是 公用 的 ， 所 以 它们 会 被 遗传 下 来 。 籍 
此 可 以 在 子 类 中 间接 访问 父 类 的 私 用 属性 ， 但 子 类 自身 的 实例 方法 都 不 能 直接 访问 这 些 私 用 属 


D 指 在 原型 链 中 查找 成 员 。 一 一 译 者 注 
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性 。 父 类 的 私 用 成 员 只 能 通过 这 些 既 有 的 特权 方法 进行 访问 ， 你 不 能 在 子 类 中 添加 能 够 直接 访问 
它们 的 新 的 特权 方法 。 


46 TŽ 


有 一 种 重用 代码 的 方法 不 需要 用 到 严格 的 继承 。 如果 想 把 一 个 函数 用 到 多 个 类 中 ,可 以 通过 
扩充 (augmentation》〉 的 方式 让 这 些 类 共享 该 函数 。 其 实际 做 法 大 体 为 ， 先 创建 一 个 包含 各 种 通 
用 方法 的 类 ， 然 后 再 用 它 扩充 其 他 类 。 这 种 包含 通用 方法 的 类 称 为 捧 元 类 (mixin class)。 它 们 通 
常 不 会 被 实例 化 或 直接 调用 。 其 存在 的 目的 只 是 向 其 他 类 提供 自己 的 方法 。 咱 们 最 好 还 是 用 一 个 
示例 来 演示 一 下 : 

/* Mixin class. */ 

var Mixin = function() {}; 

Mixin.prototype = { 

serialize: function() { 
var output = []; 
for(key in this) { 
output.push(key + ': ' + this[key]); 
} 
return output.join(', '); 

j; 

这 个 Mixin 类 只 有 一 个 名 为 serialize 的 方法 。 这 个 方法 遍 访 this 对 象 的 所 有 成 员 并 将 它们 的 
值 组 织 为 一 个 字符 串 输出 (这 只 是 一 个 简化 的 例子 。 更 健壮 的 版 本 参见 Douglas Crockford 的 JSON 
FE (http://json.org/json.js》 中 的 toJSONString 方 法 )。 这 种 方法 可 能 在 许多 不 同类 型 的 类 中 都 会 用 
到 ， 但 没有 必要 让 这 些 类 都 继承 Mixin， 把 这 个 方法 的 代码 复制 到 这 些 类 中 也 并 不 明智 。 最 好 还 
是 用 augment 函数 把 这 个 方法 添加 到 每 一 个 需要 它 的 类 中 : 


_ augment (Author, Mixin); 


var author = new Author('Ross Harmes', ['JavaScript Design Patterns']); 
var serializedString = author.serialize(); 


在 此 我 们 用 Mixin 类 中 的 所 有 方法 扩充 了 Author 类 。Author 类 的 实例 现在 就 可 以 调用 
serialize 方 法 了 。 这 可 以 被 视 为 多 亲 继 承 (multiple inheritance) 在 JavaScript 中 的 一 种 实现 方式 。 
C++ 和 Python 这 类 语言 允许 子 类 继承 多 个 超 类 。 这 在 JavaScript 中 是 不 允许 的 ， 因 为 二 个 对 象 只 能 
拥有 一 个 原型 对 象 。 不过， 由 于 一 个 类 可 以 用 多 个 掺 元 类 加 以 扩充 ， 所 以 这 实际 上 实现 了 多 继承 
的 效果 。 

augment 函数 很 简单 。 它 用 一 个 for.. in 循环 遍 访 予 类 (giving class) 的 prototype 中 的 每 一 个 
成 员 ， 并 将 其 添加 到 受 类 (receiving class) 的 prototype 中 。 如 果 受 类 中 已 经 存在 同名 成 员 ， 则 
跳 过 这 个 成 员 ， 转 而 处 理 下 一 个 。 受 类 中 的 成 员 不 会 被 改写 : 
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/* Augment function. */ 


function augment(receivingClass, givingClass) { 
for(methodName in givingClass.prototype) { 
if(!receivingClass.prototype[methodName]) { 
receivingClass.prototype[methodName] = givingClass.prototype[methodName]; 


} 
} 


这 个 函数 还 可 以 再 改进 一 下 。 如 果 掺 元 类 中 包含 许多 方法 ,但 你 只 想 复制 其 中 的 一 两 个 ， 那 
么 上 面 这 个 版 本 的 augment 函 数 是 无 法 满足 需要 的 。 下 面 的 新 版 本 会 检查 是 否 存在 额外 的 可 选 参 
数 ， 如 果 存 在 ， 则 只 复制 那些 名 称 与 这 些 参 数 匹配 的 方法 : 


/* Augment function, improved. */ 


function augment(receivingClass, givingClass) { 
if(arguments[2]) { // Only give certain methods. 
for(var i = 2, len = arguments.length; i < len; i++) { 
receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]]; 


} 
else { // Give all methods. 
for(methodName in givingClass.prototype) { 
if(!receivingClass.prototype[methodName]) { 
receivingClass.prototype[methodName] = givingClass.prototype[methodName] ; 


} 
} 
} 


现在 就 可 以 用 augment (Author, Mixin, ‘serialize’ ); 这 条 语句 来 达到 只 为 Author 类 添加 一 个 
serialize 方 法 的 目的 了 。 如 果 想 添加 更 多 方法 ， 只 要 把 它们 的 名 称 作为 参数 传 入 即 可 。 

用 一 些 方法 来 扩充 一 个 类 有 时 比 让 这 个 类 继承 另 一 个 类 更 合适 。 这 是 一 种 避免 出 现 重复 性 代 
码 的 轻便 的 解决 办 法 。 不 过 适合 这 种 方案 的 场合 并 不 是 很 多 。 只 有 那些 通用 到 足以 使 其 在 彼此 大 
不 相同 的 各 种 类 中 都 能 派 上 用 场 的 方法 才 适 合 于 共享 (要 是 那些 类 彼此 的 差异 不 是 那么 大 ， 那么 
普通 的 继承 往往 更 合适 )。 


4.7 示例 : 就 地 编辑 


我 们 将 提供 这 个 示例 的 三 种 解决 方案 , 它们 分 别 演示 了 类 式 继承 、 原 型 式 继承 和 掺 元 类 的 用 
法 。 假 设 你 的 任务 是 编写 一 个 用 于 创建 和 管理 就 地 编辑 域 的 可 重用 的 模块 化 API (就 地 编辑 
Cedit-in-place) 是 指 网 页 上 的 一 段 普通 文本 被 点 击 后 就 变 成 一 个 配 有 一 些 按钮 的 表单 域 ， 以 便 用 
户 就 地 对 这 段 文本 进行 编辑 ) 。 使 用 这 个 API， 用 户 应 该 能 够 为 对 象 ?分 配 一 个 唯一 的 ID 值 ， 能 够 


© 指 前 面 所 说 的 就 地 编辑 域 。 一 一 译 者 注 
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为 它 提供 一 个 默认 值 ， 并 且 能 够 指定 其 在 页 面 上 的 目标 位 置 。 用 户 还 应 该 在 任何 时 候 都 可 以 访问 
到 这 个 域 的 当前 值 ， 并 且 可 以 选择 具体 使 用 的 编辑 域 ( 比 如 多 行文 本 框 或 单行 文本 框 )。 


4.7.1 类 式 继承 解决 方案 
我 们 先 用 类 式 继承 创建 这 个 API: 


/* EditInPlaceField class. */ 


function EditInPlaceField(id, parent, value) { 
this.id = id; 
this.value = value || ‘default value’; 
this.parentElement = parent; 


this.createElements(this.id); 
this.attachEvents(); 
HE 


EditInPlaceField.prototype = { 
createElements: function(id) { 
this.containerElement = document.createElement('div'); 
this.parentElement.appendChild(this.containerElement) ; 


this.staticElement = document.createElement('span'); 
this.containerElement.appendChild(this.staticElement); 
this.staticElement.innerHTML = this.value; 


this. fieldElement = document.createElement('input'); 
this.fieldElement.type = ‘text'; 
this.fieldElement.value = this.value; 
this.containerElement .appendChild(this.fieldElement) ; 


this.saveButton = document.createElement(' input"); 
this.saveButton.type = ‘button’; 
this.saveButton.value = ‘Save’; 
this.containerElement .appendChild(this.saveButton); 


this.cancelButton = document.createElement('input'); 
this.cancelButton.type = ‘button’; 
this.cancelButton.value = ‘Cancel’; 
this.containerE lement .appendChild(this.cancelButton); 


this.convertToText(); 

}, 

attachEvents: function() { 
var that = this; 
addEvent(this.staticElement, ‘click’, function() { that.convertToEditable(); }); 
addEvent(this.saveButton, ‘click’, function() { that.save(); }); 
addEvent(this.cancelButton, ‘click’, function() { that.cancel(); }); 

}, 
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convertToEditable: function() { 
this.staticElement.style.display = ‘none’; 
this. fieldElement.style.display = ‘inline’; 
this.saveButton.style.display = ‘inline’; 
this.cancelButton.style.display = ‘inline’; 


this.setValue(this.value) ; 
h 
save: function() { 
this.value = this.getValue(); 
var that = this; 
var callback = { 
success: function() { that.convertToText(); }, 
failure: function() { alert('Error saving value.'); } 
}; 
ajaxRequest('GET', "save.php?id=' + this.id + '&value=' + this.value, callback); 
cancel: function() { 
this.convertToText(); 
}, 
convertToText: function() { 
this. fieldElement.style.display = 'none'; 
this.saveButton.style.display = ‘none’; 
this.cancelButton.style.display = ‘none’; 
this.staticElement.style.display = ‘inline’; 


this.setValue(this.value); 


}, 


setValue: function(value) { 
this. fieldElement.value = value; 
this.staticElement.innerHTML = value; 


}, 
getValue: function() { 

return this.fieldElement.value; 
} 


要 创建 一 个 就 地 编辑 域 ， 只 需 实例 化 这 个 类 即 可 : 


var titleClassical = new EditInPlaceField('titleClassical', $('doc'), ‘Title Here’); 
var currentTitleText = titleClassical.getValue(); 


上 述 语句 创建 了 EditPlaceFie1d 类 ( 稍 后 我 们 将 从 它 派生 出 新 类 ) 的 一 个 实例 ， 它 用 一 个 span 


标签 显示 文字 , 并 用 一 个 单行 文本 框 作 为 文字 的 编辑 区 。 它 还 具有 一 些 配置 方法 (createElements、 
attachEvents )、 一 些 用 于 转换 和 保存 的 内 部 方法 (convertToEditable、 save. cancel. 
convertToText 〉 以 及 一 对 取 值 器 和 赋值 器 (getValue、setValue)。 如 果 是 实际 使 用 中 的 代码 ， 
你 最 好 为 其 中 的 每 个 HTML 元 素 指定 一 个 特定 的 class 属 性 值 ， 以 便 用 CSS 来 设置 它们 的 样式 。 为 
简洁 起 见 ， 我 们 并 没有 这 样 做 。 
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接 下 来 我 们 要 创建 一 个 使 用 多 行文 本 框 而 不 是 单行 文本 框 的 类 。 这 个 EditInPlaceArea 类 与 
EditInPlaceFie1d 类 有 很 多 共同 之 处 ， 所 以 我 们 将 前 者 作为 后 者 的 子 类 处 理 ， 以 免 编 写 重复 性 的 
代码 : 


/* EditInPlaceArea class. */ 


function EditInPlaceArea(id, parent, value) { 
EditInPlaceArea.superclass.constructor.call(this, id, parent, value); 

}; 

extend(EditInPlaceArea, EditInPlaceField); 


// Override certain methods. 


EditInPlaceArea.prototype.createElements = function(id) { 
this.containerElement = document.createElement('div'); 
this.parentElement.appendChild(this.containerElement) ; 


this.staticElement = document.createElement('p'); 
this.containerElement .appendChild(this.staticElement) ; 
this.staticElement.innerHTML = this.value; 


this. fieldElement = document.createElement('textarea'); 
this. fieldElement.value = this.value; 
this.containerElement .appendChild(this.fieldElement) ; 


this.saveButton = document.createElement(‘input'); 
this.saveButton.type = ‘button’; 
this.saveButton.value = ‘Save'; 
this.containerElement.appendChild(this.saveButton) ; 


this.cancelButton = document.createElement('input'); 
this.cancelButton.type = ‘button'; 
this.cancelButton.value = ‘Cancel'; 
this.containerElement .appendChild(this.cancelButton) ; 


this.convertToText(); 

}5 

EditInPlaceArea.prototype.convertToEditable = function() { 
this.staticElement.style.display = ‘none’; 
this. fieldElement.style.display = ‘block’; 
this.saveButton.style.display = ‘inline’; 
this.cancelButton.style.display = ‘inline’; 


this.setValue(this. value) ; 

j; 

EditInPlaceArea.prototype.convertToText = function() { 
this.fieldElement.style.display = 'none'; 
this.saveButton.style.display = 'none'; 
this.cancelButton.style.display = 'none'; 
this.staticElement.style.display = 'block'; 


www.TopSage.com 


4.7 示例 : 就 地 编辑 53 





this. setValue(this.value); 


}; 

上 述 代 码 中 用 extend 函 数 实现 子 类 的 派生 ， 然 后 在 子 类 中 重 定 义 了 父 类 中 的 一 些 方法 ， 以 体 
现 出 二 者 的 差别 。 这 个 新 类 用 一 个 多 行文 本 框 取代 父 类 中 的 单行 文本 框 ， 用 一 个 p 标 签 取 代 父 类 
中 的 span 标 签 。 

类 式 继承 技术 用 在 这 个 案例 中 看 起 来 很 理想 。 从 EditInPlaceFie1d 派 生子 类 只 是 举 手 之 劳 ， 
用 不 了 多 少 代 码 。 要 体现 子 类 与 父 类 的 差别 ， 只 需 在 子 类 中 重 定义 一 些 父 类 的 方法 或 添加 一 些 新 
方法 即 可 。 我 们 还 可 以 把 这 种 就 地 编辑 域 与 别 的 输出 方式 关联 起 来 , 为 此 需要 另外 创建 一 个 子 类 ， 
并 在 其 中 重 定义 父 类 的 Save 方法。 因为 此 例 中 类 之 间 的 差异 很 小 ,所 以 这 种 严格 的 继承 是 一 种 理 
想 的 选择 。 


4.7.2 ”原型 式 继承 解决 方案 


尽管 类 式 继承 和 原型 式 继承 有 根本 性 的 差别 , 但 从 改 用 原型 式 继承 完成 这 个 任务 的 过 程 中 你 
会 发 现 两 种 方案 的 最 终 代码 非常 相似 : 


/* EditInPlaceField object. */ 


var EditInPlaceField = { 
configure: function(id, parent, value) { 
this.id = id; 
this.value = value || ‘default value’; 
this.parentElement = parent; 


this.createElements (this. id); 

this.attachEvents(); 
b 
createElements: function(id) { 

this.containerElement = document.createElement('div'); 

this. parentElement .appendChild(this.containerElement); 
this.staticElement = document.createElement (‘span’); 
this. containerElement..appendChild(this.staticElement); 
this.staticElement.innerHTML = this.value; 


this. fieldElement = document.createElement('input'); 
this. fieldElement.type = ‘text'; 
this.fieldElement.value = this.value; 

this. containerElement .appendChild(this.fieldElement); 


this.saveButton = document.createElement(' input’); 
this.saveButton.type = ‘button'; 
this.saveButton.value = ‘Save’; 
this.containerElement .appendChild(this.saveButton); 


this.cancelButton = document.createElement(' input’); 
this.cancelButton.type = ‘button’; 
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this.cancelButton.value = ‘Cancel’; 
this.containerElement .appendChild(this.cancelButton) ; 


this.convertToText(); 

}, 

attachEvents: function() { 
var that = this; 
addEvent(this.staticElement, ‘click’, function() { that.convertToEditable(); }); 
addEvent(this.saveButton, ‘click’, function() { that.save(); }); 
addEvent(this.cancelButton, ‘click’, function() { that.cancel(); }); 

Js 


convertToEditable: function() { 
this.staticElement.style.display = 'none'; 
this.fieldElement.style.display = 'inline'; 
this.saveButton.style.display = ‘inline’; 
this.cancelButton.style.display = ‘inline’; 


this.setValue(this. value); 
b 
save: function() { 
this.value = this.getValue(); 
var that = this; 
var callback = { 
success: function() { that.convertToText(); }, 
failure: function() { alert('Error saving value. '); } 
}; 
ajaxRequest('GET', 'save.php?id=' + this.id + '&value=' + this.value, callback); 
2 
cancel: function() { 
this.convertToText(); 
}， 
convertToText: function() { 
this. fieldElement.style.display = ‘none’; 
this.saveButton.style.display = ‘none’; 
this.cancelButton.style.display = ‘none’; 
this.staticElement.style.display = ‘inline’; 


this.setValue(this.value) ; 


}, 


setValue: function(value) { 
this. fieldElement.value = value; 
this.staticElement.innerHTML = value; 

}, 

getValue: function() { 
return this.fieldElement.value; 

} 

}; 
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上 述 代 码 中 并 没有 创建 类 ， 而 是 创建 了 一 个 对 象 。 原 型 式 继承 不 使 用 构造 函数 ， 所 以 类 式 继 
承 方案 中 的 构造 函数 中 的 代码 在 这 个 方案 中 被 移 到 了 一 个 名 为 configure 的 方法 中 。 除 此 之 外 ， 
这 个 方案 中 的 代码 与 前 一 方案 几乎 一 模 一 样 。 根 据 EditInPlaceFie1d 这 个 原型 对 象 创建 新 对 象 的 
方式 与 对 类 进行 实例 化 大 不 相同 : 

var titlePrototypal = clone(EditInPlaceField); 


titlePrototypal.configure(' titlePrototypal ', $('doc'), ‘Title Here’); 
var currentTitleText = titlePrototypal.getValue(); 


这 里 不 再 使 用 new 运 算 符 ， 而 是 使 用 clone 函 数 来 创建 一 个 对 象 副本 ， 然 后 再 对 这 个 副本 进行 
配置 。 此 后 就 可 以 象 对 待 前 面 的 titleC1assical 对 象 一 样 与 titlePrototypal 这 个 对 象 打交道 了 。 
这 两 个 对 象 基本 上 没有 什么 分 别 ， 你 可 以 用 同样 的 API 来 处 理 它 们 。 

创建 这 个 对 象 的 子 对 象 也 要 用 到 clone 函 数 : 


/* EditInPlaceArea object. */ 
var EditInPlaceArea = clone(EditInPlaceField); 
// Override certain methods. 


EditInPlaceArea.createElements = function(id) { 
this.containerElement = document.createElement('div'); 
this. parentElement.appendChild(this.containerElement) ; 


this.staticElement = document.createElement('p'); 
this.containerElement .appendChild(this.staticElement) ; 
this.staticElement.innerHTML = this.value; 
this.fieldElement = document.createElement( ‘textarea’ ); 
this. fieldElement.value = this.value; 
this.containerElement .appendChild(this. field lement); 


this.saveButton = document.createElement(' input"); 
this.saveButton.type = ‘button’; 
this.saveButton.value = 'Save'; 
this.containerE lement .appendChild(this.saveButton) ; 


this.cancelButton = document.createElement('input'); 
this.cancelButton.type = ‘button’; 
this.cancelButton.value = ‘Cancel’; 
this.containerElement .appendChild(this.cancelButton) ; 


this.convertToText(); 

}; 

EditInPlaceArea.convertToEditable = function() { 
this.staticElement.style.display = 'none'; 
this.fieldElement.style.display = ‘block'; 
this.saveButton.style.display = ‘inline’; 
this.cancelButton.style.display = ‘inline’; 
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this.setValue(this.value); 

上 

EditInPlaceArea.convertToText = function() { 
this.fieldElement.style.display = ‘none’; 
this.saveButton.style.display = ‘none’; 
this.cancelButton.style.display = ‘none’; 
this.staticElement.style.display = ‘block'; 


this.setValue(this.value) ; 


J 


上 述 代码 只 是 先 创建 EditInPlaceFie1d 对 象 的 * 个 副本 ， 然 后 改写 其 中 的 一 些 方法 。 
EditInPlaceArea 这 个 原型 对 象 可 以 像 第 一 个 原型 对 象 ? 一 样 使 用 和 克隆 。 实 际 上 ， 你 还 可 以 如 法 
炮制 ， 在 此 基础 上 创建 新 的 原型 对 象 ， 为 此 只 需 对 其 进行 克隆 并 在 新 对 象 中 进行 一 些 修改 即 可 。 

原型 式 继承 技术 看 来 也 很 适合 这 个 案例 ,其 原因 与 类 式 继承 类 似 。 这 两 种 方案 唯一 的 差别 在 
于 创建 类 (对象 ) 以 及 从 它们 派生 子 对 象 〈 实 例 ) 的 方式 。 大 多 数 代 码 (包括 所 有 方法 ) 在 两 种 
方案 中 完全 相同 。 由 此 可 见 从 其 中 一 种 范 型 转 到 别 一 种 范 型 有 多 么 容易 。 不 是 所 有 的 转变 都 有 这 
样 轻松 , 特别 是 在 涉及 具有 大 量 数组 或 对 象 类 型 的 成 员 的 类 和 对 象 时 , 但 通常 你 只 需 在 语法 方面 
进行 一 些 调整 即 可 。 

在 这 个 案例 中 ， 原 型 式 继承 相对 于 类 式 继承 并 未 表现 出 什么 优越 性 。 其 中 的 对 象 都 没有 用 到 
多 少 默认 值 ， 因 此 新 方案 的 使 用 没有 节省 什么 内 存 。 我 们 很 难说 哪 种 方案 更 好 ， 它 们 在 此 例 中 
分 伯仲 。 


47.3 ” 掺 元 类 解决 方案 


这 次 我 们 要 使 用 掺 元 类 来 处 理 这 个 问题 。 我 们 首先 创建 一 个 包含 了 所 有 要 共享 的 方法 的 掺 元 
类 ， 然 后 再 创建 一 个 新 类 ， 并 使 用 augment 函 数 来 让 这 个 新 类 共享 到 那些 方法 。 


/* Mixin class for the edit-in-place methods. */ 


var EditInPlaceMixin = function() {}; 
EditInPlaceMixin.prototype = { 
createElements: function(id) { 
this.containerElement = document.createElement('div'); 
this.parentElement..appendChild(this.containerElement) ; 


this.staticElement = document.createElement('span'); 
this.containerElement .appendChild(this.staticElement) ; 
this.staticElement.innerHTML = this.value; 


this. fieldElement = document.createElement('input'); 
this. fieldElement.type = ‘text’; 


this. fieldElement.value = this.value; 
this.containerElement .appendChild(this.fieldElement); 


@ 指 EditInPlaceFie1d。 一 一 译 者 注 
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this.saveButton = document.createElement( ‘input’ ); 
this.saveButton.type = ‘button’; 
this.saveButton.value = ‘Save’; 
this.containerElement.appendChild(this.saveButton) ; 


this.cancelButton = document.createElement( ‘input’ ); 
this.cancelButton.type = ‘button’; 
this.cancelButton.value = ‘Cancel’; 
this. containerElement .appendChild(this.cancelButton) ; 


this.convertToText(); 

}, 

attachEvents: function() { 
var that = this; 
addEvent(this.staticElement, ‘click', function() { that.convertToEditable(); }); 
addEvent(this.saveButton, ‘click’, function() { that.save(); }); 
addEvent(this.cancelButton, ‘click’, function() { that.cancel(); }); 


}, 


convertToEditable: function() { 
this.staticElement.style.display = ‘none’; 
this. fieldElement.style.display = ‘inline’; 
this.saveButton.style.display = ‘inline’; 
this.cancelButton.style.display = ‘inline’; 
this.setValue(this. value) ; 
b 
save: function() { 
this.value = this.getValue(); 
var that = this; 
var callback = { 
success: function() { that.convertToText(); }, 
failure: function() { alert('Error saving value.'); } 
}; 


ajaxRequest('GET', 'save.php?id=' + this.id + '&value=' + this.value, callback); 


上 

cancel: function() { 
this.convertToText(); 

}, 

convertToText: function() { 
this. fieldElement.style.display = 'none'; 
this.saveButton.style.display = ‘none’; 
this.cancelButton.style.display = ‘none'; 
this.staticElement.style.display = ‘inline’; 


this.setValue(this. value) ; 


}, 


setValue: function(value) { 
this. fieldElement.value = value; 
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this.staticElement.innerHTML = value; 


}, 
getValue: function() { 
return this. fieldElement.value; 


} 
}; 
这 个 掺 元 类 只 定义 了 一 些 方 法 。 要 创建 一 个 职能 类 ， 需 要 先 创建 一 个 构造 函数 ， 然 后 再 调用 
augment: 
/* EditInPlaceField class. */ 


function EditInPlaceField(id, parent, value) { 
this.id = id; 
this.value = value || ‘default value'; 
this.parentElement = parent; 


this.createElements(this. id); 
this.attachEvents(); 

}; 

augment (EditInPlaceField, EditInPlaceMixin); 


随后 即 可 像 类 式 继承 方案 中 那样 对 这 个 类 进行 实例 化 。 要 创建 使 用 多 行文 本 框 的 类 ， 你 不 是 
从 EditInPlaceFie1d 派 生子 类 ， 而 是 另行 创建 一 个 新 类 (的 构造 函数 ) 并 用 同样 的 掺 元 类 扩充 它 。 
但 是 在 扩充 这 个 新 类 之 前 ， 先 要 为 其 定义 一 些 方法 。 由 于 它们 是 在 扩充 之 前 定义 的 ， 所 以 不 会 被 
覆盖 。 


/* EditInPlaceArea class. */ 


function EditInPlaceArea(id, parent, value) { 
this.id = id; 
this.value = value || ‘default value’; 
this.parentElement = parent; 


this.createElements(this.id); 
this.attachEvents(); 
}; 

// Add certain methods so that augment won't include them. 
EditInPlaceArea.prototype.createElements = function(id) { 
this.containerElement = document.createElement(‘div'); 
this.parentElement.appendChild(this.containerElement); 

this.staticElement = document.createElement('p'); 
this.containerElement .appendChild(this.staticElement) ; 


this.staticElement.innerHTML = this.value; 


this. fieldElement = document.createElement('textarea'); 
this. fieldElement.value = this.value; 
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this.containerElement .appendChild(this.fieldElement) ; 


this.saveButton = document.createElement('input'); 
this.saveButton.type = ‘button’; 
this.saveButton.value = ‘Save’; 
this.containerElement .appendChild(this.saveButton) ; 


this.cancelButton = document.createElement('input' ); 
this.cancelButton.type = ‘button’; 
this.cancelButton.value = ‘Cancel'; 
this.containerElement .appendChild(this.cancelButton) ; 


this.convertToText(); 


j 

EditInPlaceArea.prototype.convertToEditable = function() { 
this.staticElement.style.display = 'none'; 
this.fieldElement.style.display = ‘block’; 
this.saveButton.style.display = ‘inline’; 
this.cancelButton.style.display = ‘inline’; 


this.setValue(this. value); 


3 

EditInPlaceArea.prototype.convertToText = function() { 
this. fieldElement.style.display = ‘none’; 
this.saveButton.style.display = ‘none’; 
this.cancelButton.style.display = ‘none’; 
this.staticElement.style.display = ‘block’; 


this.setValue(this.value) ; 


}5 
augment (EditInPlaceArea, EditInPlaceMixin); 


XP PY DAE CRA, 但 是 这 种 方案 不 如 前 面 两 种 。 虽然 使 用 这 些 技术 最 终 创建 
的 对 象 大 体 相同 , 但 是 从 条 理性 的 角度 来 看 ， 严 格 的 继承 方案 比 扩充 方案 更 加 清楚 。 掺 元 类 非常 
适合 于 组 织 那些 彼此 过 然 不 同 的 类 所 共享 的 方法 。 但 本 例 中 的 挨 元 类 却 是 在 为 两 个 非常 相似 的 类 
提供 所 有 方法 。 前 面 两 个 方案 中 的 代码 要 更 容易 维护 一 些 ， 因 为 开发 者 一 眼 就 能 看 出 那些 方法 的 
来 源 以 及 类 和 对 象 的 组 织 方 式 。 

实现 可 以 用 在 各 类 对 象 中 的 通用 方法 的 共享 才 是 掺 元 类 如 鱼 得 水 的 领域 , 这 方面 的 例子 包括 
将 对 象 序列 化 为 字符 串 形式 的 方法 和 输出 对 象 的 状态 以 供 调 试 之 用 的 方法 , 迭 元 类 还 可 以 用 来 模 
仿 其 他 面向 对 象 语言 中 的 枚 举 或 从 代 器 。 


48 ”继承 的 适用 场合 


继承 会 使 代码 变 得 更 加 复杂 、 更 难 被 JavaScript 新 手 理解 , 所 以 只 应 该 用 在 其 带 来 的 好 处 胜 过 
缺点 的 那些 场合 。 它 的 主要 好 处 表现 在 代码 的 重用 方面 。 通过 建立 类 或 对 象 之 间 的 继承 关系 ， 有 
些 方法 我 们 只 需要 定义 一 次 即 可 。 同 样 ， 如 果 需 要 修改 这 些 方法 或 排查 其 中 的 错误 ,那么 由 于 其 
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定义 只 出 现在 一 个 位 置 ， 所 以 非常 有 利于 节省 时 间 和 精力 。 

各 种 继承 范 型 都 有 自己 的 优 缺点 。 在 内 存 效 率 比 较 重要 的 场合 原型 式 继承 (及 clone 函 数 ) 
是 最 佳 选择 。 如 果 与 对 象 打 交道 的 都 是 些 只 熟悉 其 他 面向 对 象 语言 中 的 继承 机 制 的 程序 员 ， 那 么 
最 好 使 用 类 式 继承 (及 extend 函 数 )。 这 两 种 方法 都 适合 于 类 间 差 异 较 小 的 类 层次 体系 (hierarchy )。 
如 果 类 之 间 的 差异 较 大 ， 那 么 用 掺 元 类 中 的 方法 来 扩充 这 些 类 往往 是 一 种 更 合理 的 选择 。 

比较 简单 的 JavaScript 程 序 很 少 需要 用 到 这 种 程度 的 抽象 ,只 有 那些 有 许多 程序 员 参 与 的 大 型 
项 目 才 需要 这 种 代码 组 织 手段 。 


4.9 小 结 


本 章 讨论 了 继承 的 优点 和 缺点 ， 以 及 让 一 个 类 或 对 象 继承 另 一 个 类 或 对 象 的 三 种 方法 。 类 式 
继承 试图 模仿 C++ 和 Java 等 面向 对 象 语 言 中 类 的 继承 方式 。 它 最 适合 于 内 存 效率 要 求 不 高 或 程序 
员 不 熟悉 那 种 不 太 知名 的 原型 式 继承 的 场合 。 子 类 派生 过 程 中 大 多 数 令 人 困惑 的 步骤 可 以 用 
extend 函 数 封装 起 来 。 

原型 式 继承 的 工作 机 制 是 先 创 建 一 些 对 象 然后 再 对 其 进行 克隆 , 从 而 得 到 创建 子 类 和 实例 的 
等 效 结果 。 一 旦 你 明白 了 其 中 的 道理 ， 这 种 继承 方式 用 起 来 会 非常 顺手 ,而 且 用 这 种 办 法 创建 的 
对 象 往往 有 较 高 的 内 存 效率 ,这 是 因为 它们 会 共享 那些 未 被 改写 的 属性 和 方法 。 那些 包 含 着 数组 
或 对 象 类 型 成 员 的 对 象 的 克隆 会 有 一 些 麻烦 之 处 , 但 这 个 问题 可 以 通过 使 用 一 个 方法 来 设置 那些 
属性 的 默认 值 加 以 解决 。 创 建 一 个 克隆 对 象 的 所 有 事宜 由 clone 函 数 负责 处 理 。 

掺 元 类 提供 了 一 条 既 能 让 对 象 和 类 共享 一 些 方法 又 不 需要 让 它们 结 成 父子 关系 的 途径 。 如 果 
你 想 让 各 种 彼此 有 着 较 大 差异 的 类 共享 一 些 通 用 方法 ， 那 么 这 正 是 掺 元 类 的 用 武之 地 。augment 
函数 允许 你 选择 共享 掺 元 类 中 的 全 部 方法 还 是 部 分 方法 。 

使 用 这 三 种 技术 可 以 创建 出 复杂 的 对 象 层次 体系 ， 其 简练 性 堪 与 任何 别 的 面向 对 象 语言 媳 
美 。 对 于 编程 新 手 来 说 ，JavaScript 中 的 继承 不 那么 好 懂 或 直观 。 它 是 一 种 通过 研究 这 种 语言 的 低 
层 特性 而 发 展 起 来 的 高 级 技术 , 但 是 它 可 以 通过 使 用 几 个 便利 函数 而 得 以 简化 。 这 种 技术 非常 适 
用 于 创建 供 其 他 程序 员 使 用 的 API。 
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第 5 章 


单 体 & x 


体 (singleton) 模式 是 JavaScript 中 最 基本 但 又 最 有 用 的 模式 之 一 ， 它 可 能 比 其 他 任何 
模式 都 更 常用 。 这 种 模式 提供 了 一 种 将 代码 组 织 为 一 个 逻辑 单元 的 手段 ， 这 个 逻辑 单 
元 中 的 代码 可 以 通过 单一 的 变量 进行 访问 。 通 过 确保 单 体 对 象 只 存在 一 份 实例 ， 你 就 可 以 确信 自 
已 的 所 有 代码 使 用 的 都 是 同样 的 全 局 资源 。 
单 体 类 在 JavaScript 中 有 许多 用 途 。 它 们 可 以 用 来 划分 命名 空间 ， 以 减少 网 页 中 全 局 变量 的 数 
目 。 它 们 还 可 以 在 一 种 名 为 分 支 (branching) 的 技术 中 用 来 封装 浏览 器 之 间 的 差异 (借助 分 支 技 
术 ， 你 在 使 用 各 种 常用 的 工具 函数 时 就 不 必 再 操心 浏览 器 嗅 探 的 事 )。 更 重要 的 是 ， 借 助 于 单 体 
模式 ， 你 可 以 把 代码 组 织 得 更 为 一 致 ， 从 而 使 其 更 容易 阅读 和 维护 。 
这 种 模式 在 JavaScript 中 非常 重要 , 也 许 比 在 其 他 任何 语言 中 都 更 重要 。 在 网 页 上 使 用 全 局 变 
量 有 很 大 的 风险 ， 而 用 单 体 对 象 创建 的 命名 空间 则 是 清除 这 些 全 局 变量 的 最 佳 手段 之 一 。 仅 此 一 
个 原因 你 就 该 掌握 这 种 模式 ， 更 别 说 它 还 有 许多 别 的 用 途 。 本 章 将 介绍 其 中 最 重要 的 一 些 用 途 。 


5.1 单 体 的 基本 结构 


较 高 级 的 单 体 模式 我 们 还 是 放 到 本 章 后 面 再 讲 ,这 里 先 讨论 最 基本 的 类 型 。 最 简单 的 单 体 实 
际 上 就 是 一 个 对 象 字面 量 ， 它 把 一 批 有 一 定 关 联 的 方法 和 属性 组 织 在 一 起 : 


/* Basic Singleton. */ 

var Singleton = { 
attribute1: true, 
attribute2: 10, 


method1: function() { 

}, 

method2: function(arg) { 

}; l 


在 这 个 示例 中 ， 所 有 那些 成 员 现在 都 可 以 通过 变量 Singleton 来 访问 。 为 此 可 以 使 用 圆 点 运 
算 符 : 
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Singleton.attribute1 = false; 
var total = Singleton.attribute2 + 5; 
var result = Singleton.method1(); 


这 个 单 体 对 象 可 以 被 修改 。 你 可 以 为 其 添加 新 成 员 ， 这 一 点 与 别 的 对 象 字面 量 没什么 不 同 。 
你 也 可 以 用 delete 运 算 符 删除 其 现 有 成 员 。 这 实际 上 违背 了 面向 对 象 设计 的 一 条 原则 : 类 可 以 被 
扩展 ， 但 不 应 该 被 修改 。JavaScript 中 的 所 有 对 象 都 是 易 变 的 ， 这 正 是 它 与 CH+ 和 Java 等 别 的 面向 
对 象 语言 的 区 别 之 一 。 你 不 必 为 此 忧心 虱 促 〈Python、Ruby 和 Smalltalk 都 允许 在 定义 了 类 之 后 又 
对 其 进行 修改 )， 但 是 你 应 该 清楚 在 这 种 语言 中 无 法 阻止 对 象 的 修改 。 如 果 某 些 变量 需要 保护 ， 
那么 你 可 以 像 第 3 章 所 演示 的 那样 将 其 定义 在 闭 包 之 中 。 

你 可 能 还 是 没 发 觉 这 种 单 体 对 象 与 普通 对 象 字面 量 有 什么 不 同 。 按 传统 的 定义 ， 单 体 是 一 个 
只 能 被 实例 化 一 次 并 且 可 以 通过 一 个 众所周知 的 访问 点 访问 的 类 。 要 是 严格 地 按 这 个 定义 来 说 ， 
前 面 的 例子 所 示 的 并 不 是 一 个 单 体 ， 因 为 它 不 是 一 个 可 实例 化 的 类 。 我 们 打算 把 单 体 模 式 定义 得 
更 广义 一 些 : 单 体 是 一 个 用 来 划分 命名 空间 并 将 一 批 相关 方法 和 属性 组 织 在 一 起 的 对 象 ， 如 果 它 
可 以 被 实例 化 ， 那 么 它 只 能 被 实例 化 一 次 。 

对 象 字面 量 只 是 用 以 创建 单 体 的 方法 之 一 。 本 章 后 面 要 介绍 的 那些 方法 所 创建 的 单 体 看 起 来 
才 更 像 其 他 面向 对 象 语言 中 的 单 体 类 。 另 外 ， 并 非 所 有 对 象 字面 量 都 是 单 体 。 如 果 它 只 是 用 来 模 
仿 关联 数组 或 容纳 数据 的 话 , 那 就 显然 不 是 单 体 。 但 如 果 它 是 用 来 组 织 一 批 相关 方法 和 属性 的 话 ， 
那 就 可 能 是 单 体 。 其 区 别 主要 在 于 设计 者 的 意图 。 


5.2 划分 命名 空间 


单 体 对 象 由 两 个 部 分 组 成 : 包含 着 方法 和 属性 成 员 的 对 象 自身 ， 以 及 用 于 访问 它 的 变量 。 这 
个 变量 通常 是 全 局 性 的 ， 以 便 在 网 页 上 任何 地 方 都 能 直接 访问 到 它 所 指向 的 单 体 对 象 。 这 是 单 体 
模式 的 一 个 要 点 。 虽 然 按 定义 单 体 不 必 是 全 局 性 的 ， 但 它 应 该 在 各 个 地 方 都 能 被 访问 。 因 为 单 体 
对 象 的 所 有 内 部 成 员 都 被 包装 在 这 个 对 象 中 , 所 以 它们 不 是 全 局 性 的 。 由 于 这 些 成 员 只 能 通过 这 
个 单 体 对 象 变量 进行 访问 ， 因 此 在 某 种 意义 上 ， 可 以 说 它们 被 单 体 对 象 圈 在 了 一 个 命名 空间 中 。 

命名 空间 是 可 靠 的 JavaScript 编 程 的 一 个 重要 工具 。 在 JavaScript 中 什么 都 可 以 被 改写 ， 程 序 
员 一 不 留神 就 会 擦 除 一 个 变量 、 函 数 甚至 整个 类 ,而 自己 却 毫 无 察觉 。 这 种 错误 查找 起 来 非常 费 
时 : 

/* Declared globally. */ 


function findProduct(id) { 


} 
// Later in your page, another programmer adds... 
var resetProduct = $('reset-product-button' ); 


var findProduct = $('find-product-button'); // The findProduct function just got 
// overwritten. 
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有 个 问题 虽然 与 这 个 例子 没有 直接 关系 ， 但 却 值得 提 一 句 。 函 数 中 声明 变量 时 使 用 的 var 关 
键 字 很 重要 ， 如 果 不 使 用 它 ， 那 么 变量 将 被 声明 为 全 局 性 的 ， 因 此 更 容易 干扰 到 全 局 命名 空间 中 
的 其 他 代码 。 

现在 回头 来 看 前 面 的 例子 。 为 了 避免 无 意 中 改 写 变 量 , 最 好 的 解决 办 法 之 一 是 用 单 体 对 象 将 
代码 组 织 在 命名 空间 之 中 。 下 面 是 前 面 的 例子 用 单 体 模式 改良 后 的 结果 : 

/* Using a namespace. */ y 


var MyNamespace = { 
findProduct: function(id) { 


, 


// Other methods can go here as well. 


} 


// Later in your page, another programmer adds... 
var resetProduct = $(‘reset-product-button' ); 
var findProduct = $('find-product-button'); // Nothing was overwritten. 


现在 findProduct 函 数 是 MyNamespace 中 的 一 个 方法 ， 它 不 会 被 全 局 命名 空间 中 声明 的 任何 新 
变量 改写 。 要 注意 ， 该 方法 仍然 可 以 从 各 个 地 方 访问 。 不 同 之 处 在 于 现在 其 调用 方式 不 是 
findProduct(id)， 而 是 MyNamespace.findProduct(id)。 还 有 一 个 好 处 就 是 ， 这 可 以 让 其 他 程序 员 
大 体 知道 这 个 方法 的 声明 地 点 及 其 作用 。 用 命名 空间 把 类 似 的 方法 组 织 到 一 起 ,也 有 助 于 增强 代 
码 的 文档 性 ?。 


注解 MyNamespace 是 个 糟糕 的 单 体 名 字 ， 我 们 在 此 只 是 用 它 来 表示 这 个 对 象 字面 量 起 着 命名 空 
间 的 作用 .命名 空间 的 名 字 应 该 能 够 说 明 其 中 包含 的 代码 的 用 途 . 在 本 例 中 ,ProductTools 
这 个 名 字 要 更 恰当 一 点 。 


命名 空间 还 可 以 进一步 分 割 。 现 在 网 页 上 的 JavaScript 代 码 往往 不 止 有 一 个 来 源 。 其 中 除了 你 
写 的 代码 外 ， 还 会 有 库 代 码 、 广 告 代 码 和 徽章 代码 。 这 些 变量 都 出 现在 网 页 的 全 局 命名 空间 中 。 
为 了 避免 冲突 ， 可 以 定义 一 个 用 来 包含 自己 的 所 有 代码 的 全 局 对 象 : 


/* GiantCorp namespace. */ 
var GiantCorp = {}; 


然后 可 以 分 门 别 类 地 把 自己 的 代码 和 数据 组 织 到 这 个 全 局 对 象 中 的 各 个 对 象 ( 单 体 ) 中 : 


GiantCorp.Common = { 
// A singleton with common methods used by all objects and modules. 


QD 原文 为 “document your code”. 意思 是 说 , 命名 空间 的 使 用 有 助 于 让 用 户 了 解 代码 的 组 织 结构 及 其 各 部 分 的 用 途 ， 
这 实际 上 就 是 提供 了 关于 代码 的 说 明 信 息 。 
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GiantCorp.ErrorCodes = { 
// An object literal used to store data. 


GiantCorp.PageHandler = { 
// A singleton with page specific methods and attributes. 


来 源 于 外 部 的 代码 与 GiantCorp 这 个 变量 发 生 冲突 的 可 能 性 很 小 。 如 果真 有 冲突 ， 其 造成 的 
问题 会 非常 明显 ， 所 以 很 容易 被 发 现 。 想 到 自己 办 事 牢 靠 ， 没 有 把 全 局 命名 空间 搞 得 一 片 狼 藉 ， 
你 大 可 高 枕 无 忧 。 你 只 是 在 全 局 命名 空间 中 加 入 了 一 个 变量 , 这 是 一 个 JavaScript 程 序 员 可 望 获得 
的 最 小 地 盘 。 


5.3 用 作 特 定 网 页 专用 代码 的 包装 器 的 单 体 


你 已 经 了 解 了 如 何 把 单 体 作为 命名 空间 使 用 , 现在 我 们 再 介绍 单 体 模式 的 一 个 特殊 用 途 。 在 
那 种 拥有 许多 网 页 的 网 站 中 , 有 些 JavaScript 代 码 是 所 有 网 页 都 要 用 到 的 , 它们 通常 被 存放 在 独立 
的 文件 中 ; 而 有 些 代码 则 是 某 个 网 页 专用 的 ， 不 会 被 用 到 其 他 地 方 。 最 好 把 这 两 种 代码 分 别 包装 
在 自己 的 单 体 对 象 中 。 

用 来 包装 各 个 网 页 专用 的 代码 的 单 体 通常 看 起 来 都 差不多 。 它 需要 封装 一 些 数据 (也许 是 作 
为 常量 )、 为 各 网 页 特有 的 行为 定义 一 些 方法 以 及 定义 初始 化 方法 。 涉及 DOM 中 特有 元 素 的 大 多 
数 代码 ， 比 如 添加 事件 监听 器 的 代码 ， 只 有 在 这 些 元 素 加 载 之 后 才能 工作 。 你 可 以 通过 创建 一 个 
init 方 法 并 将 其 关联 到 窗口 的 1oad 事 件 〈 或 类 似 的 其 他 事件 ， 比 如 由 此 派生 出 来 的 
DOMContentLoaded 事 件 或 DOMLoaded 事 件 ”)， 将 所 有 这 些 初始 化 代码 组 织 到 一 个 地 方 。 

下 面 是 用 来 包装 特定 网 页 专用 代码 的 单 体 的 骨架 : 

/* Generic Page Object. */ 

Namespace.PageName = { 

// Page constants. 
CONSTANT 1: true, 
CONSTANT 2: 10, 


// Page methods. 
method1: function() { 


J 
method2: function() { 


}, 
// Initialization method. 


init: function() { 


© 详情 参见 http://peter.michaux.ca/article/553。 
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} 
} 


// Invoke the initialization method after the page loads. 
addLoadEvent (Namespace. PageName. init) ; 


我 们 用 一 个 Web 开 发 中 很 常见 的 任务 为 例 示 范 一 下 它 的 用 法 。 我们 经 常 想 要 用 JavaScript 为 表 
单 添加 功能 。 出 于 平稳 退化 方面 的 考虑 , 通常 先 创 建 一 个 不 依赖 于 JavaScript 的 、 使 用 普通 提交 机 
制 完成 任务 的 纯 HTML 网 页 。 然 后 再 用 JavaScript 控 制 表单 的 行为 ， 以 提供 额外 的 特性 。 

下 面 的 单 体 会 查找 并 劫持 〈hijiack) 一 个 特定 的 表单 : 


/* RegPage singleton, page handler object. */ 
GiantCorp.RegPage = { 


// Constants. 
FORM_ID: ‘reg-form', 
OUTPUT _ID: ‘reg-results’, 


// Form handling methods. 
handleSubmit: function(e) { 
e.preventDefault(); // Stop the normal form submission. 


var data = {}; 
var inputs = GiantCorp.RegPage. formE].getElementsByTagName(' input’); 


// Collect the values of the input fields in the form. 
for(var i = 0, len = inputs.length; i < len; i++) { 
data[inputs[i].name] = inputs[i].value; 


} 


// Send the form values back to the server. 
GiantCorp.RegPage. sendRegistration(data) ; 
}, 
sendRegistration: function(data) { 
// Make an XHR request and call displayResult() when the response is 
// received. 


bask 


displayResult: function(response) { 
// Output the response directly into the output element. We are 
// assuming the server will send back formatted HTML. 
GiantCorp.RegPage.outputEl.innerHTML = response; 

}, 


// Initialization method. 

init: function() { 
// Get the form and output elements. 
GiantCorp.RegPage. forme] = $(GiantCorp.RegPage.FORM_ ID); 
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GiantCorp.RegPage.outputEl = $(GiantCorp.RegPage.OUTPUT ID); 


// Hijack the form submission. 
addEvent(GiantCorp.RegPage.formEl, ‘submit’, GiantCorp.RegPage.handleSubmit); 


} 
J; 


// Invoke the initialization method after the page loads. 
addLoadEvent(GiantCorp.RegPage. init); 


上 述 代码 中 首先 假定 GiantCorp 命 名 空间 已 经 作为 一 个 空 的 对 象 字面 量 被 创建 好 了 。 如 若 不 
然 ， 代 码 的 第 一 行 就 会 引发 一 个 错误 。 下 面 这 行 代码 可 以 防止 这 种 错误 ， 如 果 GiantCorp 还 不 存 
在 ， 它 就 会 定义 这 个 对 象 ， 其 中 使 用 的 逻辑 “或 ”运算 符 可 以 在 未 找到 一 个 属性 时 为 其 提供 一 个 
默认 值 : 

var GiantCorp = window.GiantCorp || {}; 


在 前 面 的 例子 中 ,我 们 把 所 关注 的 两 个 HTML 元 素 的 ID 值 作为 常量 保存 起 来 ， 这 是 因为 在 程 
序 执行 期 间 它们 不 会 发 生变 化 。 

其 中 的 初始 化 方法 先 获取 那 两 个 HTML 元 素 的 引用 ， 然 后 把 它们 作为 单 体 的 新 属性 保存 起 
来 。 这 没 问 题 ， 你 可 以 在 运行 时 添加 或 删除 单 体 的 成 员 。 这 个 方法 还 把 一 个 方法 关联 到 表单 的 
submit 事 件 。 此 后 当 表 单 被 提交 时 ， 其 正常 行为 会 被 阻止 (这 是 e.preventDefau1t() 的 作用 )， 取 
而 代 之 的 是 收集 表单 数据 并 用 Ajax 方 式 将 其 发 回 服务 器 的 操作 。 


5.4 拥有 私 用 成 员 的 单 体 


我 们 在 第 3 章 中 讨论 过 几 种 创建 类 的 私 用 成 员 的 做 法 。 使 用 真正 的 私 用 方法 的 一 个 缺点 在 于 
它们 比较 耗费 内 存 ， 因 为 每 个 实例 都 具有 方法 的 一 份 新 副本 。 不 过 ， 由 于 单 体 对 象 只 会 被 实例 化 
一 次 ， 因 此 为 其 定义 真正 的 私 用 方法 时 不 必 顾 虑 内 存 方面 的 问题 。 尽 管 如 此 ， 创 建 伪 私 用 成 员 还 
是 更 容易 一 些 ， 所 以 我 们 先 谈 谈 这 种 做 法 。 


5.4.1 使 用 下 划 线 表示 法 


在 单 体 对 象 内 创建 私 用 成 员 最 简单 、 最 直截了当 的 办 法 是 使 用 下 划 线 表示 法 。 这 可 以 让 其 他 
程序 员 知道 相关 方法 或 属性 是 私 用 的 ， 只 在 对 象 内 部 使 用 。 在 单 体 对 象 中 使 用 下 划 线 表示 法 是 一 
种 告 诚 其 他 程序 员 不 要 直接 访问 特定 成 员 的 简明 办 法 : 


/* DataParser singleton, converts character delimited strings into arrays. */ 


GiantCorp.DataParser = { 
// Private methods. 
_StripWhitespace: function(str) { 
return str.replace(/\s+/, ‘'); 
} 


_StringSplit: function(str, delimiter) { 


www.TopSage.com 


5.4 拥有 私 用 成 员 的 单 体 67 


return str.split(delimiter); 


3 


// Public method. 
stringToArray: function(str, delimiter, stripWS) { 
if(stripwWS) { 
str = this. stripWhitespace(str); 
= outputArray = this. stringSplit(str, delimiter); 
return outputArray; 
S 
这 个 例子 中 的 单 体 对 象 有 一 个 公用 方法 stringToArray。 该 方法 的 参数 包括 一 个 字符 串 、 一 
个 分 隔 符 ， 以 及 一 个 用 以 指示 是 否 要 删除 所 有 空白 字符 的 可 选 的 布尔 值 。 它 的 工作 主要 靠 
_stripWhitespace 和 _stringSp1it 这 两 个 私 用 方法 完成 。 这 两 个 方法 不 是 该 单 体 有 记载 的 接口 的 
一 部 分 ， 以 后 更 新 时 不 见得 还 会 存在 ， 所 以 它们 不 应 该 被 公开 。 将 它们 设计 为 私 用 方法 ， 重 构 所 
有 内 部 代码 时 就 不 必 担 心 会 现 及 别人 的 程序 。 比 如 说 ， 后 来 你 检查 了 一 下 这 个 对 象 ， 觉 得 
_stringSp1it 没 有 必要 作为 一 个 单独 的 函数 存在 。 你 可 以 将 其 彻底 删除 ， 而 且 因为 这 是 用 下 划 线 
标记 的 私 用 方法 ， 可 以 确信 没 人 会 直接 调用 它 〈 如 果真 有 这 样 的 人 ， 他 们 活该 遭受 报应 )。 
stringToArray 方 法 中 用 this 访 问 单 体 中 的 其 他 方法 。 这 是 访问 单 体 中 其 他 成 员 的 最 简便 的 做 
法 。 但 这 样 做 也 有 一 点 风险 ， 因 为 this 并 不 一 定 就 指向 GiantCorp.Dataparser。 例 如 ， 如 果 把 某 
个 方法 用 作 事 件 监听 器 ， 那 么 其 中 的 this 可 能 会 指向 window 对 象 ， 这 意味 着 stripWhitespace 和 
_stringSp1it 这 两 个 方法 不 会 被 找到 。 虽 然 大 多 数 JavaScript 库 都 会 为 事件 关联 进行 作用 域 校正 ， 
但 还 是 使 用 全 名 GiantCorp.DataParser 访 问 单 体内 的 其 他 成 员 更 保险 一 点 。 


5.4.2 ”使 用 闭 包 


在 单 体 对 象 中 创建 私 用 成 员 的 第 二 种 办 法 需要 借助 闭 包 。 这 与 第 3 章 中 创建 真正 的 私 用 成 员 
的 做 法 非常 相似 , 但 也 有 一 个 重要 的 区 别 。 先 前 的 做 法 是 把 变量 和 函数 定义 在 构造 函数 体内 (不 
使 用 this 关 键 字 ) 以 使 其 成 为 私 用 成 员 ， 此 外 还 在 构造 函数 体内 定义 了 所 有 的 特权 方法 并 用 this 
关键 字 使 其 可 被 外 界 访问 。 每 生成 一 个 该 类 的 实例 时 ， 所 有 声明 在 构造 函数 内 的 方法 和 属性 都 会 
再 次 创建 一 份 。 这 可 能 会 非常 低 效 。 

因为 单 体 只 会 被 实例 化 一 次 , 所 以 你 不 用 担心 自己 在 构造 函数 中 声明 了 多 少 成 员 。 每 个 方法 
和 属性 都 只 会 被 创建 一 次 , 所 以 你 可 以 把 它们 都 声明 在 构造 函数 内 部 (因此 也 就 位 于 同一 个 闭 包 
中 )。 先 前 你 所 见 的 单 体 都 是 这 样 的 对 象 字面 量 : 


/* Singleton as an Object Literal. */ 


MyNamespace. Singleton = {}; 


现在 我 们 用 一 个 在 定义 之 后 立即 执行 的 函数 创建 单 体 : 


/* Singleton with Private Members, step 1. */ 
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MyNamespace.Singleton = function() { 
return {}; 


}0); 

上 述 两 个 例子 中 所 创建 的 两 个 MyNamespace.Singleton 完 全 相同 。 要 注意 在 第 二 个 例子 中 并 没 
有 把 一 个 函数 赋 给 MyNamespace.Singleton。. 那 个 匿名 函数 返回 一 个 对 象 ， 而 赋 给 MyNamespace. 
Singleton 变 量 的 正 是 这 个 对 象 。 为 了 立即 执行 这 个 匿名 函数 ， 只 需 在 其 定义 的 最 后 那个 大 括号 
后 面 放 上 一 对 圆 括号 即 可 。 

有 些 程序 员 喜 欢 在 那个 匿名 函数 定义 之 外 再 套 上 一 对 圆 括号 , 以 表示 它 会 在 声明 之 后 立即 执 
行 。 这 在 所 创建 的 单 体 较为 庞大 时 尤其 有 用 ， 因 为 你 只 要 盯 一 眼 就 能 看 出 该 函数 只 是 用 来 创建 一 
个 闭 包 。 额 外 加 上 这 对 圆 括号 后 ， 前 面 创建 单 体 那 个 例子 就 变 成 下 面 的 样子 : 


/* Singleton with Private Members, step 1. */ 


MyNamespace.Singleton = (function() { 
return {}; 


HO; 
你 可 以 像 以 前 那样 把 公用 成 员 添加 到 作为 单 体 返 回 的 那个 对 象 字面 量 中 : 


/* Singleton with Private Members, step 2. */ 


MyNamespace.Singleton = (function() { 
return { // Public members. 
publicAttribute1: true, 
publicAttribute2: 10, 


publicMethod1: function() { 


}, 
publicMethod2: function(args) { 


} 
}; 

HO; 

要 是 这 样 得 到 的 结果 与 直接 使 用 一 个 对 象 字 面 量 没 什么 区 别 , 那 又 何必 劳 神 加 上 那 层 函数 包 
装 呢 ? 原因 在 于 这 个 包装 函数 创建 了 一 个 可 以 用 来 添加 真正 的 私 用 成 员 的 闭 包 。 任何 声明 在 这 个 
匿名 函数 中 (但 不 是 在 那个 对 象 字 面 量 中 ) 的 变量 或 函数 都 只 能 被 在 同一 个 闭 包 中 声明 的 其 他 函 
数 访问 。 这 个 闭 包 在 匿名 函数 执行 结束 后 依然 存在 ， 所 以 在 其 中 声明 的 函数 和 变量 总 能 从 匿名 函 
数 所 返回 的 对 象 内 部 〈 并 且 也 只 能 从 内 部 ) 访问 。 

下 面 的 代码 示范 了 在 那个 匿名 函数 中 添加 私 用 成 员 的 做 法 ; 

/* Singleton with Private Members, step 3. */ 

MyNamespace.Singleton = (function() { 


// Private members. 
var privateAttribute1 = false; 
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var privateAttribute2 = [1, 2, 3]; 
function privateMethod1() { 


} 
function privateMethod2(args) { 


ia 


return { // Public members. 
publicAttribute1: true, 
publicAttribute2: 10, 


publicMethod1: function() { 


}, 
publicMethod2: function(args) { 


Ap 
F 
po; 
这 种 单 体 模式 又 称 模块 模式 Cmodule pattern) 8， 指 的 是 它 可 以 把 一 批 相 关 方法 和 属性 组 织 
为 模块 并 起 到 划分 命名 空间 的 作用 。 


5.4.3 ”两 种 技术 的 比较 


现在 回 到 Dataparser 这 个 例子 中 来 ， 看 看 如 何在 其 实现 中 使 用 真正 的 私 用 成 员 。 现 在 我 们 不 
再 为 每 个 私 用 方法 名 称 的 开头 添加 一 个 下 划 线 ， 而 是 把 这 些 方 法 定义 在 闭 包 中 : 


/* DataParser singleton, converts character delimited strings into arrays. */ 
/* Now using true private methods. */ 


GiantCorp.DataParser = (function() { 
// Private attributes. 
var whitespaceRegex = /\s+/; 


// Private methods. 
function stripWhitespace(str) { 
return str.replace(whitespaceRegex, ''); 


} 
function stringSplit(str, delimiter) { 
return str.split(delimiter) ; 


} 


// Everything returned in the object literal is public, but can access the 
// members in the closure created above. 


© 详情 参见 http://yuiblog.com/blog/2007/06/12/module-pattern/。 
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return { 

// Public method. 

stringToArray: function(str, delimiter, stripwWs) { 
if(stripwWs) { 

str = stripWhitespace(str); 

} 
var outputArray = stringSplit(str, delimiter); 
return outputArray; 


j 
~ })Q)5 // Invoke the function and assign the returned object literal to 
// GiantCorp.DataParser. 


现在 这 些 私 用 方法 和 属性 可 以 直接 用 其 名 称 访问 , 不 必 在 其 前 面 加 上 “this. ?或 “GiantCorp. 
DatapParser.”， 这 些 前 组 只 用 于 访问 单 体 对 象 的 公用 成 员 。 

这 种 模式 与 使 用 下 划 线 表示 法 的 模式 相 比 有 几 点 优势 。 把 私 用 成 员 放 到 闭 包 中 可 以 确保 其 不 
会 在 单 体 对 象 之 外 被 使 用 。 你 可 以 自由 地 改变 对 象 的 实现 细节 ， 这 不 会 殉 及 别人 的 代码 。 还 可 以 
用 这 种 办 法 对 数据 进行 保护 和 封装 (尽管 单 体 很 少 被 这 样 用 ,除非 那些 数据 只 能 被 保存 在 一 个 地 
方 )。 

在 使 用 这 种 模式 时 ， 你 可 以 享受 到 真正 的 私 用 成 员 带 来 的 所 有 好 处 ， 而 不 必 付出 什么 代价 ， 
这 是 因为 单 体 类 只 会 被 实例 化 一 次 。 单 体 模式 之 所 以 是 JavaScript 中 最 流行 、 应 用 最 广泛 的 模式 之 
一 ， 原 因 即 在 于 此 。 


警告 要 记 住 单 体 的 公用 成 员 和 私 用 成 员 的 声明 语法 有 所 不 同 ， 前 者 被 声明 在 对 象 字 面 量 内 部 
而 后 者 并 非 如 此 。 私 用 属性 必须 用 Var 声明， 否则 它 将 成 为 全 局 性 的 。 私 用 方法 则 按 
function funcName(args) {...} 这 样 的 形式 声明 ， 在 最 后 一 个 大 括号 之 后 不 需要 使 用 分 
号 ,公用 属性 和 方法 分 别 按 attributeName: attributeValue 和 methodName: function(args) 
{.….} 这 样 的 形式 声明 ， 如 果 后 面 还 要 声明 别 的 成 员 的 话 ， 那 么 该 声明 的 后 面 应 该 加 上 一 
个 过 号 。 


5.5 ”惰性 实例 化 


前 面 所 讲 的 单 体 模式 的 各 种 实现 方式 有 一 个 共同 点 : 单 体 对 象 都 是 在 脚本 加 载 时 被 创建 出 
来 。 对 于 资源 密集 型 的 或 配置 开销 甚大 的 单 体 ， 也 许 更 合理 的 做 法 是 将 其 实例 化 推迟 到 需要 使 用 
它 的 时 候 。 这 种 技术 被 称 为 情 性 加 载 〈lazy loading)， 它 最 常用 于 那些 必须 加 载 大 量 数据 的 单 体 。 
而 那些 被 用 作 命 名 空间 、 特定 网 页 专用 代码 包装 器 或 组 织 相 关 实 用 方法 的 工具 的 单 体 最 好 还 是 立 
即 实例 化 。 

这 种 惰性 加 载 单 体 的 特别 之 处 在 于 ， 对 它们 的 访问 必须 借助 于 一 个 静态 方法 。 应 该 这 样 调 用 
其 方法 : Singleton.getInstance() .methodName()， 而 不 是 这 样 调用 : Singleton.methodName(). 
getInstance 方 法 会 检查 该 单 体 是 否 已 经 被 实例 化 。 如 果 还 没有 ， 那 么 它 将 创建 并 返回 其 实例 。 
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如 果 单 体 已 经 实例 化 过 ,那么 它 将 返回 现 有 实例 。 下 面 我们 从 前 面 那个 拥有 真正 的 私 用 成 员 的 单 
体 的 基本 框架 出 发 示范 一 下 如 何 把 普通 单 体 转化 为 惰性 加 载 单 体 : 


/* Singleton with Private Members, step 3. */ 


MyNamespace.Singleton = (function() { 
// Private members. 
var privateAttribute1 = false; 
var privateAttribute2 = [1, 2, 3]; 


function privateMethod1() { 


} 
function privateMethod2(args) { 


eu 


return { // Public members. 
publicAttribute1: true, 
publicAttribute2: 10, 


publicMethod1: function() { 


b 
publicMethod2: function(args) { 


; ma 
}; 
NOs 


这 段 代 码 还 没有 进行 任何 修改 。 转 化 工作 的 第 一 步 是 把 单 体 的 所 有 代码 移 到 一 个 名 为 
constructor 的 方法 中 : 


/* General skeleton for a lazy loading singleton, step 1. */ 
MyNamespace.Singleton = (function() { 
function constructor() { // All of the normal singleton code goes here. 
// Private members. 
var privateAttribute1 = false; 
var privateAttribute2 = [1, 2, 3]; 
function privateMethod1() { 


} 
function privateMethod2(args) { 


as 


return { // Public members. 
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publicAttribute1: true, 
publicAttribute2: 10, 


publicMethod1: function() { 


}, 
publicMethod2: function(args) { 


} 
} 
} . 


03 


这 个 方法 不 能 从 闭 包 外 部 访问 ， 这 是 件 好事 ， 因 为 我 们 想 全 权 控 制 其 调用 时 机 。 公 用 方法 


getInstance 就 是 用 来 实现 这 种 控制 的 。 为 了 使 其 成 为 公用 方法 ， 只 需 将 其 放 到 一 个 对 象 字面 量 
中 并 返回 该 对 象 即 可 ; 


/* General skeleton for a lazy loading singleton, step 2. */ 


MyNamespace.Singleton = (function() { 
function constructor() { // All of the normal singleton code goes here. 
} 
return { 


getInstance: function() { 
// Control code goes here. 


} 
} 
DO; 


现在 开始 编写 用 于 控制 单 体 类 实例 化 时 机 的 代码 。 它 需要 做 两 件 事 。 第 一 ， 它 必须 知道 该 类 
是 否 已 经 被 实例 化 过 。 第 二 ， 如 果 该 类 已 经 实例 化 过 ， 那 么 它 需要 掌握 其 实例 的 情况 ， 以 便 能 返 
回 这 个 实例 。 办 这 两 件 事 需要 用 到 一 个 私 用 属性 和 已 有 的 私 用 方法 constructor: 


/* General skeleton for a lazy loading singleton, step 3. */ 


MyNamespace.Singleton = (function() { 


var uniqueInstance; // Private attribute that holds the single instance. 


function constructor() { // All of the normal singleton code goes here. 


} 


return { 
getInstance: function() { 


if(!uniqueInstance) { // Instantiate only if the instance doesn't exist. 
uniqueInstance = constructor(); 
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} 


return uniqueInstance; 


} 
0; 
把 一 个 单 体 转 化 为 惰性 加 载 单 体 后 ， 你 必须 对 调用 它 的 代码 进行 修改 。 在 本 例 中 ， 像 这 样 的 
方法 调用 : 
MyNamespace.Singleton.publicMethod1(); 
应 该 被 改 为 下 面 的 形式 : 
MyNamespace.Singleton.getInstance().publicMethod1(); 


惰性 加 载 单 体 的 缺点 之 一 在 于 其 复杂 性 。 用 于 创建 这 种 类 型 的 单 体 的 代码 并 不 直观 ,而且 不 
易 理解 (不 过 良好 的 文档 可 以 提供 帮助 ;。 如 果 你 需要 创建 一 个 延迟 实例 化 的 单 体 ， 那 么 最 好 为 
其 编写 一 条 注释 解释 这 样 做 的 原因 ， 以 免 别 人 把 它 简 化 为 普通 单 体 。 

顺便 提 一 句 ， 如 果 觉 得 命名 空间 名 称 太 长 ， 可 以 创建 一 个 别名 来 简化 它 。 这 种 别名 只 不 过 是 
一 个 保存 了 对 特定 对 象 的 引用 的 变量 。 在 本 例 中 ， 可 以 把 MyNamespace.Singleton 简 化 为 MNS: 


var MNS = MyNamespace.Singleton; 


这 样 做 会 创建 一 个 全 局 变量 ， 所 以 最 好 还 是 把 它 声 明 在 一 个 特定 网 页 专用 代码 包装 器 单 体 
中 。 在 存在 单 体 峰 套 的 情况 下 ,会 出 现 一 些 作用 域 方面 的 问题 。 在 这 种 场合 下 访问 其 他 成 员 最 好 
使 用 完全 限定 名 〈 比 如 GiantCorp.SingletonName) 而 不 是 this。 


56 分支 


分 支 (branching) 是 一 种 用 来 把 浏览 器 间 的 差异 封装 到 在 运行 期 间 进行 设置 的 动态 方法 中 的 
技术 。 举 个 例 来 说 ， 假 设 我 们 需要 创建 一 个 返回 XHR 对 象 的 方法 。 这 种 XHR 对 象 在 大 多 数 浏览 
器 中 是 XMLHttpRequest 类 的 实例 ， 而 在 下 早期 版 本 中 则 是 某 种 ActiveX 类 的 实例 。 这 样 一 个 方法 通 
常会 进行 某 种 浏览 器 嗅 探 或 对 象 探测 。 如 果 不 用 分 支 技术 ， 那 么 每 次 调用 这 个 方法 时 ， 所 有 那些 
浏览 器 嗅 探 代码 都 要 再 次 运行 。 要 是 这 个 方法 的 调用 很 频繁 ， 那 么 这 样 做 会 严重 缺乏 效率 。 

更 有 效 的 做 法 是 只 在 脚本 加 载 时 一 次 性 地 确定 针对 特定 浏览 器 的 代码 。 这 样 一 来 , 在 初始 化 
完成 之 后 , 每 种 浏览 器 都 只 会 执行 针对 它 的 JavaScript 实 现 而 设计 的 代码 。 能 够 在 运行 时 动态 确定 
函数 代码 的 能 力 , 正 是 JavaScript 的 高 度 灵活 性 和 强大 表现 能 力 的 一 种 体现 。 这 种 类 型 的 优化 很 容 
易 理 解 ， 它 能 提高 调用 这 些 函 数 的 效率 。 

你 可 能 一 时 还 难以 明白 分 支 这 个 话题 与 单 体 模 式 有 什么 关系 。 在 前 面 所 讲 的 三 种 模式 中 , 单 
体 对 象 的 所 有 代码 都 是 在 运行 时 确定 的 。 这 在 用 闭 包 创建 私 用 成 员 的 模式 中 最 容易 看 出 来 : 


MyNamespace.Singleton = (function() { 
return {}; 


HO; 
那个 匿名 函数 在 运行 时 得 以 执行 , 其 返回 的 对 象 字 面 量 被 赋 给 MyNamespace.Singleton 变量 。 
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我 们 可 以 创建 两 个 不 同 的 对 象 字面 量 ， 并 根据 某 种 条 件 将 其 中 之 一 赋 给 那个 变量 : 
/* Branching Singleton (skeleton). */ 
MyNamespace.Singleton = (function() { 


var objectA = { 
method1: function() { 


}, 
method2: function() { 


} 
j; 


var objectB = { 
method1: function() { 


}, 
method2: function() { 


} 
}3 


return (someCondition) ? objectA : objectB; 

HO; 

上 述 代码 中 创建 了 两 个 对 象 字 面 量 , 它们 拥有 相同 的 一 套 方法 。 对 于 使 用 这 个 单 体 的 程序 员 
来 说 ， 赋 给 MyNamespace.Singleton 的 究竟 是 哪个 对 象 无 关 紧 要 ， 因为 这 两 个 对 象 实现 了 同样 的 接 
口 ， 可 以 执行 同样 的 任务 ， 不 同 之 处 仅仅 在 于 对 象 的 方法 具体 使 用 的 代码 。 你 并 不 是 只 能 使 用 两 
个 分 支 ， 只 要 有 理由 ， 你 也 可 以 创建 具有 三 四 个 分 支 的 单 体 。 据 以 在 分 支 中 进行 选择 的 条 件 值 在 
运行 时 进行 确定 。 这 种 条 件 通 常 是 某 种 能 力 检测 的 结果 ， 意 在 确保 运行 代码 的 JavaScript 环 境 实现 
了 所 需要 的 特性 。 如 若 不 然 ， 则 将 改 而 使 用 应 变 代码 (fallback code). 

分 支 技术 并 不 总 是 更 高 效 的 选择 。 在 前 面 的 例子 中 ， 有 两 个 对 象 CobjectAMlobjectB) 被 创 
建 出 来 并 保存 在 内 存 中 ,但 派 上 用 场 的 只 有 一 个 。 在 考虑 是 否 使 用 这 种 技术 的 时 候 ， 你 必须 在 缩 
短 计 算 时 间 (因为 判断 该 使 用 哪个 对 象 的 代码 只 会 执行 一 次 ) 和 占用 更 多 内 存 这 一 利 一 次 之 间 权 
衡 一 下 。 下 一 个 例子 就 属于 适合 采用 分 支 技 术 的 情况 ， 因 为 其 中 的 分 支 对 象 较 小 而 判断 使 用 哪个 
对 象 的 开销 较 大 。 


5.7 示例 : 用 分 支 技术 创建 XHR 对 象 


在 本 例 中 我 们 要 创建 一 个 单 体 ， 它 有 一 个 用 来 生成 XHR 对 象 实例 的 方法 〈 在 第 7 章 中 还 有 一 
个 更 高 级 的 版 本 )。 我 们 首先 应 该 判断 需要 多 少 分支 。 因 为 所 能 实例 化 的 对 象 只 有 3 种 不 同类 型 ， 
所 以 我 们 需要 3 个 分 支 。 这 些 分 支 分 别 按 其 返回 的 XHR 对 象 类 型 命名 ; 


/* SimpleXhrFactory singleton, step 1. */ 


var SimpleXhrFactory = (function() { 


www.TopSage.com 


5.7 示例 : 用 分 支 技术 创建 XHR 对 象 75 


// The three branches. 
var standard = { 
createXhrObject: function() { 
return new XMLHttpRequest(); 
} 
}; 
var activeXNew = { 
createXhrObject: function() { 
return new ActiveXObject('Msxml2.XMLHTTP" ); 
} 
}; 
var activeX0ld = { 
createXhrObject: function() { 
return new ActiveXObject( 'Microsoft.XMLHTTP' ); 
} 
}; 


NO; 

这 3 个 分 支 各 含 一 个 对 象 字面 量 ， 它 们 都 有 一 个 名 为 createXhr0bject 的 方法 。 这 个 方法 所 做 
的 只 是 返回 一 个 可 以 用 来 执行 异步 请 求 的 新 对 象 。 

创建 分 支 型 单 体 的 第 2 步 是 根据 条 件 将 3 个 分 支 中 某 一 分 支 的 对 象 赋 给 那个 变量 。 其 具体 做 法 
是 逐一 尝试 每 种 XHR 对 象 ， 直 到 遇 到 一 个 当前 JavaScript 环 境 所 支持 的 对 象 为 止 ; 


/* SimpleXhrFactory singleton, step 2. */ 
var SimpleXhrFactory = (function() { 


// The three branches. 
var standard = { 
createXhrObject: function() { 
return new XMLHttpRequest(); 
} 
}; 
var activeXNew = { 
createXhrObject: function() { 
return new ActiveXObject( 'Msxml2.XMLHTTP' ); 
} 
}; 
var activeX0ld = { 
createXhrObject: function() { 
return new ActiveXObject('Microsoft.XMLHTTP' ); 
} 
}; 


// To assign the branch, try each method; return whatever doesn't fail. 
var testObject; 
try { 
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testObject = standard.createXhrObject(); * 
return standard; // Return this if no error was thrown. 


} 
catch(e) { 


try { 
testObject = activeXNew.createXhrObject(); 
return activeXNew; // Return this if no error was thrown. 


} 
catch(e) { 


try { 
testObject = activex0ld.createxhrObject(); 
return activeXOld; // Return this if no error was thrown. 


} 
catch(e) { 
throw new Error('No XHR object found in this environment. ' ); 
} 
} 
} 


HO; 

这 个 单 体现 在 就 可 以 用 来 生成 XHR 对 象 的 实例 。 使 用 该 API 的 程序 员 只 要 调用 SimpleXhr- 
Factory.createXhr0bject() 就 能 得 到 适合 特定 的 运行 时 环境 的 XHR 对 象 。 用 了 分 支 技术 后 ， 所 有 
那些 特性 嗅 探 代码 都 只 会 执行 一 次 ， 而 不 是 每 生成 一 个 对 象 就 要 执行 一 次 。 

这 是 一 种 非常 有 效 的 技术 ， 它 适用 于 任何 只 有 在 运行 时 才能 确定 具体 实现 的 情况 。 第 7 章 讨 
论 工厂 模式 时 我 们 还 会 进一步 研究 这 个 话题 。 


5.8 单 体 模式 的 适用 场合 


从 为 代码 提供 命名 空间 和 增强 其 模块 性 这 个 角度 来 说 ， 你 应 该 尽量 多 使 用 单 体 模式 。 单 是 
JavaScript 中 最 有 用 的 模式 之 一 几乎 适用 于 所 有 大 大 小 小 的 项 目 。 在 简单 的 快餐 型 项 目 中 ,你 可 
以 只 是 把 单 体 用 作 命 名 空间 ,将 自己 的 所 有 代码 组 织 在 一 个 全 局 变量 名 下 。 在 稍 大 、 稍 复杂 一 点 
的 项 目 中 , 单 体 可 以 用 来 把 相关 代码 组 织 在 一 起 以 便 日 后 维护 , 或 者 用 来 把 数据 或 代码 安置 在 一 
个 众所周知 的 单一 位 置 。 在 大 型 或 复杂 的 项 目 中 ， 它 可 以 起 到 优化 作用 : 那些 开销 较 大 却 又 很 少 
使 用 的 组 件 可 以 被 包装 到 惰性 加 载 单 体 中 ， 而 针对 特定 环境 的 代码 则 可 以 被 包装 到 分 支 型 单 体 
中 。 

很 少见 到 有 哪个 项 目 用 不 到 某 种 形式 的 单 体 模式 .JavaScript 的 灵活 性 使 单 体 可 以 被 用 于 多 种 
个 同 任务 。 可 以 说 ， 这 种 模式 在 JavaScript 中 的 重要 性 大 大 超过 它 在 其 他 语言 中 的 重要 性 。 这 主要 
是 因为 它 可 以 用 来 创建 命名 空间 以 减少 全 局 变量 的 数目 。 这 种 作用 对 于 JavaScript 非 常 重要 , 因为 
这 种 语言 中 的 全 局 变量 比 其 他 语言 中 的 更 有 危险 性 。 网 页 包含 的 JavaScript 代 码 往往 有 着 五 花 八 门 
的 来 源 ， 其 编写 者 形形色色 ， 所 以 全 局 变量 和 函数 很 容易 被 改写 ， 从 而 导致 你 的 代码 失灵 。 可 以 
解决 这 种 问题 的 单 体 模式 无 疑 是 程序 员 们 工具 箱 中 的 一 大 利器 。 
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5.9 单 体 模式 之 利 


单 体 模式 的 主要 好 处 在 于 它 对 代码 的 组 织 作用 。 把 相关 方法 和 属性 组 织 在 一 个 不 会 被 多 次 实 
例 化 的 单 体 中 ,可 以 使 代码 的 调试 和 维护 变 得 更 轻松 。 描述 性 的 命名 空间 还 可 以 增强 代码 的 自我 
说 明 性 ， 有 利于 新 手 阅 读 和 理解 。 把 你 的 方法 包 庄 在 单 体 中 ， 可 以 防止 它们 被 其 他 程序 员 误 改 ， 
还 可 以 防止 全 局 命名 空间 被 一 大 堆 变 量 弄 得 一 团 糟 。 单 体 可 以 把 你 的 代码 与 第 三 方 的 库 代 码 和 广 
告 代码 隔离 开 来 ， 从 而 在 整体 上 提高 网 页 的 稳定 性 。 

单 体 模式 的 一 些 高 级 变 体 可 以 在 开发 周期 的 后 期 用 于 对 脚本 进行 优化 ,提升 其 性 能 。 使 用 惰 
性 实例 化 技术 , 可 以 直到 需要 一 个 对 象 的 时 候 才 创建 它 ， 从 而 减少 那些 不 需要 它 的 用 户 承 受 的 不 
必要 的 内 存 消耗 〈 还 可 能 包括 带宽 消耗 )。 分 支 技术 则 可 以 用 来 创建 高 效 的 方法 ， 不 用 管 浏览 器 
或 环境 的 兼容 性 如 何 。 通 过 根据 运行 时 的 条 件 确定 赋 给 单 体 变量 的 对 象 字面 量 ， 你 可 以 创建 出 为 
特定 环境 量 身 定制 的 方法 ， 这 种 方法 不 会 在 每 次 调用 时 都 一 再 浪费 时 间 去 检查 运行 环境 。 


5.10 ŞIRA 


由 于 单 体 模 式 提供 的 是 一 种 单 点 访问 ， 所 以 它 有 可 能 导致 模块 间 的 强 耦合 。 这 是 这 种 模式 受 
到 的 主要 批评 ， 这 个 批评 也 很 中 肯 。 有 时 创建 一 个 可 实例 化 的 类 更 为 可 取 ， 哪怕 它 只 会 被 实例 化 
一 次 。 因 为 这 种 模式 可 能 会 导致 类 间 的 强 耦 合 ， 所 以 它 也 不 利于 单元 测试 。 你 无 法 单独 测试 一 个 
调用 了 来 自 单 体 的 方法 的 类 ， 而 只 能 把 它 与 那个 单 体 作为 一 个 单元 一 起 测试 。 单 体 最 好 还 是 留 给 
定义 命名 空间 和 实现 分 支 型 方法 这 些 用 途 。 在 这 些 情 况 下 ， 耦 合 不 是 什么 问题 。 

有 时 某 种 更 高 级 的 模式 会 更 符合 任务 的 需要 。 与 惰性 加 载 单 体 相 比 ， 虚 拟 代理 能 给 予 你 对 类 
实例 化 方式 更 多 的 控制 权 。 你 也 可 以 用 一 个 真正 的 对 象 工厂 来 取代 分 支 型 单 体 (虽说 这 个 工厂 可 
能 也 是 一 个 单 体 )。 不 要 对 本 书 中 那些 更 特别 的 模式 抱 有 晨 难 情绪 ， 不 要 仅仅 因为 单 体 “ 够 可 以 
了 ”就 选择 使 用 它 。 你 应 该 确保 所 选择 的 模式 适合 自己 的 任务 。 


5.11 小 结 


单 体 模式 是 JavaScript 中 最 基本 的 模式 之 一 。 它 不 仅 可 以 像 你 在 本 章 所 看 到 的 那样 单独 使 用 ， 
还 能 以 这 样 或 那样 的 形式 与 本 书 所 讲 的 大 多 数 模式 配合 使 用 。 例 如 ， 对 象 工厂 就 可 以 被 设计 为 单 
体 , 组 合 对象 的 所 有 子 对 象 也 可 以 被 封装 进 一 个 单 体 命名 空间 中 。 本 书 讲 的 就 是 如 何 创建 可 重用 
的 模块 化 代码 。 寻 找 组 织 和 说 明代 码 的 各 种 方法 是 迈 向 这 个 目标 的 最 重要 的 步骤 之 一 。 单 体 在 这 


方面 很 有 用 处 。 把 你 的 代码 包装 在 一 个 单 体 中 ,就 不 必 担 心 别 人 在 使 用 它们 时 会 改写 到 他 们 自己 


的 全 局 变量 ， 这 是 向 创建 供 大 众 使 用 的 API 这 个 方向 迈 出 的 一 大 步 。 这 也 是 成 为 一 个 值得 信赖 的 
高 级 JavaScript 程 序 员 所 要 经 历 的 第 一 步 。 
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万 法 的 链 式 调用 


章 研 究 的 是 JavaScript 对 方法 进行 链 式 调用 的 能 力 。 应 用 程序 开发 人 员 可 以 使 用 一 些 简 
单 技术 来 改进 自己 的 代码 编写 工作 。 你 可 以 写 一 些 函数 来 处 理 各 种 常见 任务 ， 以 节省 
时 间 ; 也 可 以 改进 一 下 代码 的 实现 方式 。 最 后 ， 你 可 以 把 方法 的 链 式 调用 技术 用 到 自己 所 写 的 整 
个 JavaScript 库 中 ， 把 自己 喜欢 的 方法 串 连 起 来 调用 。 
链 式 调用 其 实 只 不 过 是 一 种 语法 招数 。 它 能 让 你 通过 重用 一 个 初始 操作 来 达到 用 少量 代码 表 
达 复 杂 操 作 的 目的 。 这 种 技术 包含 两 个 部 分 : 一 个 创建 代表 HTML 元素 的 对 象 的 工厂 〈 第 7 章 将 
详细 讲述 工厂 模式 )， 以 及 一 批 对 这 个 HTML 元 素 执行 某 些 操作 的 方法 。 每 一 个 这 种 方法 都 可 以 
在 方法 名 前 附 上 一 个 圆 点 后 加 入 调用 链 中 。 方法 的 链 式 调 用 可 以 被 视 为 选择 网 页 上 的 一 个 元 素 并 
对 其 进行 一 个 或 多 个 操作 的 过 程 。 
我 们 先 看 个 小 小 的 例子 。 通 过 对 比 “ 之 前 和 之 后 ”的 代码 ， 你 就 能 对 链 式 调 用 的 概念 有 个 初 
步 认识 。 这 个 例子 使 用 了 一 些 预 先 定义 的 实用 函数 ， 这 些 函 数 具 体 如 何 实 现 对 于 这 个 例子 来 说 并 
不 重要 。 例 中 我 们 要 获取 一 个 ID 值 为 example 的 元 素 的 引用 ， 然 后 为 其 指派 一 个 事件 监听 器 。 当 
这 个 元 素 被 点 击 时 ， 事 件 监听 器 会 将 其 文本 颜色 设置 为 绿色 ， 然 后 显示 该 元 素 : 


// Without chaining: 

addEvent($('example'), ‘click', function() { 
setStyle(this, ‘color’, ‘green'); 

show( this); 

}); 


// With chaining: 
$('example').addEvent('click', function() { 

$(this).setStyle(‘color', 'green’).show(); 
}); 


6.1 调用 链 的 结构 


对 $ 函 数 你 已 经 很 熟悉 了 。 它 通常 返回 一 个 HTML 元 素 或 一 个 HTML 元 素 的 集合 ， 如 下 所 示 ， 


function $() { 
var elements = []; 
for (var i = 0, len = arguments.length; i < len; ++i) { 
var element = arguments[i]; 
if (typeof element === 'string') { 
` element = document.getElementById(element); 
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} 
if (arguments.length === 1) { 
return element; 


elements .push(element); 


return elements; 


但 是 ， 如 果 把 这 个 函数 改造 为 一 个 构造 器 ， 把 那些 元 素 作为 数组 保存 在 一 个 实例 属性 中 ， 并 
让 所 有 定义 在 构造 器 函数 的 prototype 属 性 所 指 对 象 中 的 方法 都 返回 用 以 调用 方法 的 那个 实例 的 
引用 ， 那 么 它 就 具有 了 进行 链 式 调用 的 能 力 。 先 别 说 得 太 远 。 我 们 首先 需要 把 这 个 $ 函 数 改 为 一 
个 工厂 方法 ， 它 负责 创建 支持 链 式 调用 的 对 象 。 这 个 函数 应 该 能 接受 元 素数 组 形式 的 参数 ， 以 便 
我 们 能 够 使 用 与 原来 一 样 的 公用 接口 。 修 改 后 的 代码 如 下 所 示 : 

(function() { 

// Use a private class. 
function $(els) { 
this.elements = []; 
for (var i = 0, len = els.length; i < len; ++i) { 
var element = els[i]; 
if (typeof element === 'string') { 
element = document. getE lementById(element) ; 


} 


this.elements.push(element); 


// The public interface remains the same. 
window.$ = function() { 
return new _$(arguments); 


D0; 4 | 
由 于 所 有 对 象 都 会 继承 其 原型 对 象 的 属性 和 方法 , 所 以 我 们 可 以 让 定义 在 原型 对 象 中 的 那 几 

个 方法 都 返回 用 以 调用 方法 的 实例 对 象 的 引用 ,这 样 就 可 以 对 那些 方法 进行 链 式 调用 。 想 好 这 一 

点 ， 我 们 现在 就 动手 在 _$ 这 个 私 用 构造 函数 的 prototype 对 象 中 添加 方法 ， 以 便 实现 链 式 调用 : 


(function() { 
function $(els) { 
' ara 


_$.prototype = { 
each: function(fn) { 
for ( var i = 0, len = this.elements. length; i < len; ++i ) { 
fn.call(this, this.elements[i]); 


return this; 


}, 
setStyle: function(prop, val) { 
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this.each(function(el) { 
el.style[prop] = val; 
})3 
return this; 
}, 
show: function() { 
var that = this; 
this.each(function(el) { 
that.setStyle('display’, ‘block'); 
}); 
return this; 
b 
addEvent: function(type, fn) { 
var add = function(el) { 
if (window.addEventListener) { 
el.addEventListener(type, fn, false); 


else if (window.attachEvent) { 
el.attachEvent('on'+type, fn); 
} 
j; 
this.each(function(el) { 
add(el); 
}); 
return this; 
} 
}; 
window.$ = function() { 
return new $(arguments); 
}; 
HO; 


看 看 该 类 的 每 一 个 方法 的 最 后 一 行 ， 你 会 发 现 它们 都 以 “return this;” 结 束 。 这 会 将 用 以 
调用 方法 的 对 象 传 给 调用 链 上 的 下 一 个 方法 。 A REA EIR RETO ERA 现在 


你 可 以 像 这 样 编写 代码 : 
$(window).addEvent('load', function() { 
$('test-1', ‘test-2').show(). 
setStyle('color', 'red'). 
addEvent('click', function(e) { 
$(this).setStyle('color', 'green'); 
}); 
}); 
这 会 把 一 个 事件 监听 器 关联 到 window 对 象 的 1oad 事 件 。 它 执行 的 时 候 会 立即 显示 ID 值 为 
test-1 和 test-2 的 两 个 元 素 并 将 其 中 的 文字 设置 为 红色 , 随后 , 它 会 为 这 两 个 元 素 添 加 click 事 件 
监听 器 ， 其 作用 是 在 它们 被 点 击 时 将 文字 设置 为 绿色 。 代 码 虽 然 只 有 一 点 点 ， 却 表达 了 相当 多 的 


东西 。 
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精通 jQuery 这 个 JavaScript 库 的 读者 应 该 比较 熟悉 这 种 接口 。 在 这 种 编程 方式 中 ，window 对 象 
或 某 个 HTML 元 素 是 调用 链 的 锚 点 ， 所 有 操作 都 挂 系 在 上 面 。 在 前 面 的 例子 中 有 两 条 调用 链 : 一 
条 为 window 对 象 添 加 1oad 事 件 监听 器 ， 另 一 条 则 设置 ID 值 为 test-1 和 test-2 的 两 个 元 素 的 样式 并 
为 其 添加 cl1ick 事 件 监听 器 。 几 乎 所 有 现 有 的 实用 程序 都 可 以 用 这 种 方式 来 加 以 改造 ， 以 便 进 行 
链 式 调用 。 这 将 在 下 一 节 中 详细 讨论 。 


6.2 设计 一 个 支持 方法 链 式 调用 的 JavaScript 库 


前 面 对 $ 函 数 的 改造 只 提供 了 对 儿 个 最 常用 的 实用 函数 进行 链 式 调用 的 支持 ， 但 是 你 可 以 尽 
情 对 其 扩充 。 设 计 一 个 JavaScript 库 需要 深思 熟 虑 。 一 个 库 不 一 定 要 有 成 百 上 千 行 代码 ， 它 的 功能 
决定 了 它 的 大 小 。 你 可 以 借鉴 一 下 各 种 JavaScript 库 中 包含 的 那些 最 常用 的 特性 。 表 6-1 列 出 了 几 
乎 所 有 JavaScript 库 都 有 的 基本 特性 。 


表 6-1 常见 于 大 多 数 JavaScript 库 中 的 特性 


特 性 说 了 明 
事件 添加 和 删除 事件 监听 器 ; 对 事件 对 象 进行 规范 化 处 理 
DOM 类 名 管理 ; 样式 管理 
Ajax 对 XMLHttpRequest 进 行规 范 化 处 理 


要 是 对 那个 私 用 的 _$ 构 造 函 数 进行 扩充 ， 把 这 些 东西 包括 进去 ， 那么 其 伪 码 大 致 是 下 面 这 个 
样子 : 
// Include syntactic sugar to help the development of our interface. 
Function.prototype.method = function(name, fn) { 
this.prototype[name] = fn; 
return this; 
(function() { 
function $(els) { 
RE rahe 
} 
/* 
Events 
* addEvent 
* getEvent 
*/ 
_$.method('addEvent', function(type, fn) { 
FF ess 
}).method('getEvent', function(e) { 
PE Ses 
}). 
/* 
DOM 
* addClass 
* removeClass 
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* replaceClass 
* hasClass 
* getStyle 
* setStyle 
yi 
method('addClass', function(className) { 
PP iri 
}).method('removeClass', function(className) { 
9 BAEP, 
})-method('replaceClass', function(oldClass, newClass) { 
ERS 
}).method('hasClass', function(className) { 
FF shea 
})-method('getStyle', function(prop) { 
Se 
}).method('setStyle', function(prop, val) { 
VT 
}). 
/* 
AJAX 
* load. Fetches an HTML fragment from a URL and inserts it into an element. 
*/ 
method('load', function(uri, method) { 
Paks 
H; 
window.$ = function() { 
return new _$(arguments); 
}); 
HO; 


搭 好 这 个 API 的 架子 之 后 ， 现 在 该 着 重 考虑 的 是 它 的 使 用 者 可 能 是 些 什么 人 ， 以 及 他 们 会 在 
什么 情况 下 使 用 它 。 如 果 某 个 现 有 的 API 已 经 定义 了 一 个 4 函数， 那么 我 们 的 这 个 库 会 将 其 改写 。 
有 个 简单 的 解决 办 法 是 在 源 代码 中 为 $ 函 数 另 取 一 个 名 字 。 但 是 ， 如 果 你 是 从 一 个 现 有 的 源 代码 
库 (source-code repository) 中 取得 的 源 代码 , 那么 每 次 从 这 个 代码 库 中 获取 更 新 版 本 的 代码 之 后 ， 
你 都 不 得 不 再 次 为 那个 函数 改名 ， 所 以 这 个 解决 方案 并 不 理想 。 在 这 种 情况 下 ， 更 好 的 解决 办 法 
是 像 下 面 这 样 添加 一 个 安装 器 (installer): 


Function.prototype.method = function(name, fn) { 
Rh sn 
}; 
(function() { 
function $(els) { 
SE Gt 


} 

_$.method('addEvent', function(type, fn) { 
Tai 

})3 


window. installHelper = function(scope, interface) { 
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scope[interface] = function() { 
return new $(arguments); 
} 
j; 
HO; 
用 户 可 能 会 这 样 使 用 它 : 
installHelper(window, '$'); 


$( ‘example’ ).show(); 


下 面 是 个 更 复杂 的 例子 ， 它 演示 了 如 何 把 这 种 功能 添加 到 一 个 事先 定义 好 的 命名 空间 对 象 


// Define a namespace without overwriting it if it already exists. 
window.com = window.com || {}; 

com.example = com.example || {}; 

com.example,util = com.example.util || {}; 


installHelper(com.example.util, ‘get'); 


(function() { 
var get = com.example.util.get; 
get('example’).addEvent(‘click', function(e) { 
get(this).addClass(‘hello'); 
H; 
HO; 


6.3 ”使 用 回调 从 支持 链 式 调用 的 方法 获取 数据 


有 时 把 方法 串 连 起 来 调用 并 不 是 个 好 主意 。 链 式 调用 很 适合 于 赋值 器 方法 , 但 对 于 取 值 器 方 
法 , 你 可 能 会 希望 它们 返回 你 要 的 数据 而 不 是 返回 this。 不 过 , 如 果 你 把 链 式 调用 作为 首要 目标 ， 
希望 所 有 方法 的 使 用 方式 保持 一 致 的 话 , 那么 变通 办 法 还 是 有 的 : 你 可 以 利用 回调 技术 来 返回 所 
要 的 数据 。 下 面 的 例子 同时 展示 了 这 两 种 做 法 。 其 中 ，API 类 使 用 了 普通 的 取 值 器 〈 它 中 断 了 调 
用 链 )， 而 API2 类 则 使 用 了 回调 方法 : © 

// Accessor without function callbacks: returning requested data in accessors. 

window.API = window.API || function() { 

var name = ‘Hello world’: 

// Privileged mutator method. 

this.setName = function(newName) { 

name = newName; 
return this; 
}: 
// Privileged accessor method. 


O 原 书 中 这 个 例子 的 代码 有 严重 错误 。 我 已 经 做 了 修改 。 一 一 译 者 注 
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this.getName = function() { 
return name: 
}; 


// Implementation code. 

var 0 = new API: 

console. log(o.getName()); // Displays "Hello world’. 
console. 10g(o.setName('Meow').getName()); // Displays ‘Meow’ . 


// Accessor with function callbacks. 
window. API2 = window.API2 || function() { 
var name = ‘Hello world’: 
// Privileged mutator method. 
this.setName = function(newName) { 
name = newName; 
return this; 
} 
// Privileged accessor method. 
this.getName = function(callback) { 
callback.call(this, name); 
return this; 
}; 
b 


// Implementation code. 

var 02 = new API2; 

02.getName(console. 10g) .setName( 'Meow').getName(console. 109); 
// Displays ‘Hello world’ and then ‘Meow’. 


6.4 小结 


在 JavaScript 中 对 象 是 作为 引用 被 传递 的 。 所 以 你 可 以 让 每 个 方法 都 传 回 对 象 的 引用 。 如 果 让 
一 个 类 的 每 个 方法 都 返回 this 值 ， 那 么 它 就 成 了 一 个 支持 方法 的 链 式 调用 的 类 。 这 种 编程 风格 有 
助 于 简化 代码 的 编写 工作 ， 并 且 在 某 种 程度 上 可 以 让 代码 更 加 简洁 、 易 读 。 很 多 时 候 使 用 链 式 调 
用 可 以 避免 多 次 重复 使 用 一 个 对 象 变量 ， 从 而 减少 代码 量 。 如 果 想 让 类 的 接口 保持 一 致 ， 让 赋值 
[90] 器 和 取 值 器 方法 都 支持 链 式 调用 ， 那 么 你 可 以 在 取 值 器 中 使 用 回调 技术 。 
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二 个 类 或 对 象 中 往往 会 包含 别 的 对 象 。 在 创建 这 种 成 员 对 象 时 ， 你 可 能 习惯 于 使 用 常规 方 
式 ， 也 即 用 new 关 键 字 和 类 构造 函数 。 问 题 在 于 这 会 导致 相关 的 两 个 类 之 间 产生 依赖 性 。 
本 章 将 讲述 一 种 有 助 于 消除 这 两 个 类 之 间 的 依赖 性 的 模式 ， 它 使 用 一 个 方法 来 决定 究竟 要 实例 化 哪 
个 具体 的 类 。 我 们 既 要 讨论 简单 工厂 模式 ,也 要 讨论 更 复杂 的 工厂 模式 。 前 者 另外 使 用 一 个 类 ( 通 
常 是 一 个 单 体 ) 来 生成 实例 ， 而 后 者 则 使 用 子 类 来 决定 一 个 成 员 变 量 应 该 是 哪个 具体 的 类 的 实例 。 


7.1 简单 工厂 


最 好 用 一 个 例子 来 说 明 简单 工厂 模式 的 概念 。 假 设 你 想 开 几 个 自行 车 商店 ,每 个 店 都 有 几 种 
型 号 的 自行 车 出 售 。 这 可 以 用 一 个 类 来 表示 : 


/* BicycleShop class. */ 


var BicycleShop = function() {}; 
BicycleShop.prototype = { 
sellBicycle: function(model) { 
var bicycle; 


switch(model) { 
case “The Speedster': 
bicycle = new Speedster(); 
break; 
case ‘The Lowrider’: 
bicycle = new Lowrider(); 
break; 
case “The Comfort Cruiser': 
default: 
bicycle = new ComfortCruiser(); 
} 
Interface.ensureImplements(bicycle, Bicycle); 
bicycle.assemble(); 
bicycle.wash(); 


return bicycle; 


E 
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sellBicycle 方 法 根据 所 要 5 
自行 车 实例 可 以 互 换 使 用 ， 因 ; 






H: 
EM ROALT RAP HIE Ae 条 种 类 型 检查 以 确保 其 实现 了 
BoE AK, LT RAR 就 所 剩 无 几 了 。 在 所 有 这 些 例 子 中 ， 你 可 以 创建 一 
些 对 象 并 且 对 它们 一 视 辣 针 ereot 同样 一 批 方法 ， 


/* The Bicycle interface. */ 





var Bicycle = new Interface('Bicycle', ['assemble', 'wash', ‘ride’, 'repair']); 
/* Speedster class. */ 


var Speedster = function() { // implements Bicycle 


}; 
Speedster.prototype = { 
assemble: function() { 


wash: function() { 


oe 


ride: function() { 


ae 


repair: function() { 


, its 
}; 
要 出 售 某 种 型 号 的 自行 车 ， 只 要 调用 se11Bicycle 方 法 即 可 ; 


var californiaCruisers = new BicycleShop(); 
var yourNewBike = californiaCruisers.sellBicycle('The Speedster’); 


在 情况 发 生变 化 之 前 ,这 倒 也 挺 管用 。 但 要 是 你 想 在 供 货 目 录 中 加 入 一 款 新 车 型 又 会 怎么 样 
WE? 你 得 为 此 修改 BicycleShop 的 代码 ， 哪 怕 这 个 类 的 实际 功能 实际 上 并 没有 发 生 改变 一 一 依旧 
是 创建 一 个 自行 车 的 新 实例 ， 组 装 它 ， 清 洗 它 ， 然 后 把 它 交 给 顾客 。 更 好 的 解决 办 法 是 把 
se11Bicycle 方 法 中 “创建 新 实例 ”这 部 分 工作 转交 给 一 个 简单 工厂 对 象 : 

/* BicycleFactory namespace. */ 

var BicycleFactory = { 


createBicycle: function(model) { 
var bicycle; 


switch(model) { 
case ‘The Speedster’: 
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bicycle = new Speedster(); 
break; 
case ‘The Lowrider’: 
bicycle = new Lowrider(); 
break; 
case ‘The Comfort Cruiser': 
default: 
bicycle = new ComfortCruiser(); 


} 


Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 
} 
}; 


BicycleFactory 是 一 个 单 体 ， 用 来 把 createBicycle 方 法 封装 在 一 个 命名 空间 中 。 这 个 方法 返 
回 一 个 实现 了 Bicycle 接 口 的 对 象 ， 然 后 你 可 以 照常 对 其 进行 组 装 和 清洗 : 


/* BicycleShop class, improved. */ 


var BicycleShop = function() {}; 
BicycleShop.prototype = { 
sellBicycle: function(model) { 
var bicycle = BicycleFactory.createBicycle(model); 


bicycle.assemble(); 
bicycle.wash(); 


return bicycle; 
} 
}; 


这 个 BicycleFactory 对 象 可 以 供 各 种 类 用 来 创建 新 的 自行 车 实例 。 有 关 可 供 车 型 的 所 有 信息 
都 集中 在 一 个 地 方 管理 ， 所 以 添加 更 多 车 型 很 容易 : 


/* BicycleFactory namespace, with more models. */ 


var BicycleFactory = { 
createBicycle: function(model) { 
var bicycle; 


switch(model) { 

case “The Speedster': 
bicycle = new Speedster(); 
break; 

case “The Lowrider’: 
bicycle = new Lowrider(); 
break; 

case “The Flatlander'’: 
bicycle = new Flatlander(); 
break; 
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case ‘The Comfort Cruiser’: 
default: 
bicycle = new ComfortCruiser(); 


} 


Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 
} 

}; 

BicycleFactory 就 是 简单 工厂 的 一 个 很 好 的 例子 。 这 种 模式 把 成 员 对 象 的 创建 工作 转交 给 一 
个 外 部 对 象 。 这 个 外 部 对 象 可 以 像 本 例 中 一 样 是 一 个 简单 的 命名 空间 ， 也 可 以 是 一 个 类 的 实例 。 
如 果 负 责 创建 实例 的 方法 的 逻辑 不 会 发 生变 化 , 那么 一 般 说 来 用 单 体 或 静态 类 方法 创建 这 些 成 员 
实例 是 合乎 情理 的 。 但 如 果 你 要 提供 几 种 不 同 品牌 的 自行 车 ,那么 更 恰当 的 做 法 是 把 这 个 创建 方 
法 实现 在 一 个 类 中 ， 并 从 该 类 派生 出 一 些 子 类 。 


7.2 工矿 模式 


真正 的 工厂 模式 与 简单 工厂 模式 的 区 别 在 于 ， 它 不 是 另外 使 用 一 个 类 或 对 象 来 创建 自行 车 
(就 像 前 面 的 例子 中 所 做 的 那样 )， 而 是 使 用 一 个 子 类 。 按 照 正 式 定 义 ， 工 厂 是 一 个 将 其 成 员 对 象 
的 实例 化 推迟 到 子 类 中 进行 的 类 。 我 们 还 是 以 BicycleShop 为 例 来 说 明 简单 工厂 和 工厂 模式 之 间 
的 差别 。 
我 们 打算 让 各 个 自行 车 商店 自行 决定 从 哪个 生产 厂家 进货 。 出 于 这 个 原因 ， 单 单一 个 
BicycleFactory 对 象 将 无 法 提供 需要 的 所 有 自行 车 实例 。 我 们 可 以 把 BicycleShop 设 计 为 抽象 类 ， 
让 子 类 根据 各 自 的 进货 渠道 实现 其 createBicycle 方 法 ,: 


/* BicycleShop class (abstract). */ 


var BicycleShop = function() {}; 
BicycleShop.prototype = { 
sellBicycle: function(model) { 
var bicycle = this.createBicycle(mode1) ; 


bicycle.assemble(); 
bicycle.wash(); 


return bicycle; 
}, 
createBicycle: function(model) { 
throw new Error('Unsupported operation on an abstract class.'); 
} 
j; 
这 个 类 中 定义 了 createBicycle 方 法 ， 但 真 要 调用 这 个 方法 的 话 ， 会 抛 出 一 个 错误 。 现 在 
BicycleShop 是 一 个 抽象 类 ， 它 不 能 被 实例 化 ， 只 能 用 来 派生 子 类 。 设 计 一 个 经 销 特定 自行 车 生 


产 厂家 产品 的 子 类 需要 扩展 BicycleShop， 重 定义 其 中 的 createBicycle 方 法 。 下 面 是 两 个 子 类 的 
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例子 ， 其 中 一 个 子 类 代表 的 商店 从 Acme 公 司 进 货 ， 而 另 一 个 则 从 General Products 公 司 进货 ; 


/* AcmeBicycleShop class. */ 


var AcmeBicycleShop = function() {}; 

extend(AcmeBicycleShop, BicycleShop); 

AcmeBicycleShop.prototype.createBicycle = function(model) { 
var bicycle; 


switch(model) { 
case ‘The Speedster': 
bicycle = new AcmeSpeedster(); 
break; 
case 'The Lowrider’: 
bicycle = new AcmeLowrider(); 
break; 
case ‘The Flatlander'’: 
bicycle = new AcmeFlatlander(); 
break; 
case “The Comfort Cruiser’: 
default: 
bicycle = new AcmeComfortCruiser(); 
} 
Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 


}; 
/* GeneralProductsBicycleShop class. */ 


var GeneralProductsBicycleShop = function() {}; 

extend(GeneralProductsBicycleShop, BicycleShop); 

GeneralProductsBicycleShop.prototype.createBicycle = function(model) { 
var bicycle; 


switch(model) { 
case “The Speedster': 
bicycle = new GeneralProductsSpeedster(); 
break; 
case ‘The Lowrider’: 
bicycle = new GeneralProductsLowrider(); 
break; 
case ‘The Flatlander': 
bicycle = new GeneralProductsFlatlander(); 
break; 
case “The Comfort Cruiser’: 
default: 
bicycle = new GeneralProductsComfortCruiser(); 
} 


Interface.ensureImplements(bicycle, Bicycle); 
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return bicycle; 


}; 

这 些 工厂 方法 生成 的 对 象 都 实现 了 Bicycle 接 口 ， 所 以 在 其 他 代码 眼 里 它们 完全 可 以 互 换 。 
自行 车 的 销售 工作 还 是 与 以 前 一 样 ， 只 是 现在 所 开 的 商店 可 以 是 Acme 或 General Products 自 行车 
专 买 店 : 

var alecsCruisers = new AcmeBicycleShop(); 


var yourNewBike = alecsCruisers.sellBicycle('The Lowrider'); 


var bobsCruisers = new GeneralProductsBicycleShop(); 
var yourSecondNewBike = bobsCruisers.sellBicycle('The Lowrider'); 


因为 两 个 生产 厂家 生产 的 自行 车 款式 完全 相同 , 所 以 顾客 买 车 时 可 以 不 用 关心 车 究竟 是 哪 家 
生产 的 。 要 是 他 们 只 想 要 Acme 生 产 的 自行 车 ， 他 们 可 以 去 Acme 专 买 店 买 。 

增加 对 其 他 生产 厂家 的 支持 很 简单 ， 只 要 再 创建 一 个 BicycleShop 的 子 类 并 重 定义 其 
createBicycle 工 三 方法 即 可 。 我 们 也 可 以 对 各 个 子 类 进行 修改 ， 以 支持 相关 厂家 其 他 型 号 的 产 
品 。 这 是 工厂 模式 最 重要 的 特点 。 对 Bicycle 进 行 一 般 性 操作 的 代码 可 以 全 部 写 在 父 类 BicycleShop 
中 ， 而 对 具体 的 Bicycle 对 象 进行 实例 化 的 工作 则 被 留 到 子 类 中 。 一 般 性 的 代码 被 集中 在 一 个 位 
置 ， 而 个 体 性 的 代码 则 被 封装 在 子 类 中 。 


7.3 工厂 模式 的 适用 场合 


创建 新 对 象 最 简单 的 办 法 是 使 用 new 关 键 字 和 具体 类 。 只 有 在 某 些 场合 下 ， 创 建 和 维护 对 象 
工厂 所 带 来 的 额外 复杂 性 才 是 物 有 所 值 。 本 节 概 括 了 这 些 场合 。 


7.3.1 动态 实现 


如 果 需 要 像 前 面 自行 车 的 例子 一 样 , 创建 一 些 用 不 同方 式 实现 同一 接口 的 对 象 ， 那么 可 以 使 
用 一 个 工厂 方法 或 简单 工厂 对 象 来 简化 选择 实现 的 过 程 。 这 种 选择 可 以 是 明确 进行 的 也 可 以 是 隐 
含 的 。 前 者 如 自行 车 那个 例子 , 顾客 可 以 选择 需要 的 自行 车 型 号 ; 而 下 一 节 所 讲 的 XHR 工 厂 那 个 
例子 则 属于 后 者 ,该 例 中 所 返回 的 连接 对 象 的 类 型 取决 于 所 探查 到 的 带宽 和 网 络 延 时 等 因素 。 在 
这 些 场合 下 ,你 通常 要 与 一 系列 实现 了 同一 个 接口 、 可 以 被 同等 对 待 的 类 打交道 。 这 是 JavaScript 
中 使 用 工厂 模式 的 最 常见 的 原因 。 


7.3.2 节省 设置 开销 


如 果 对 象 需要 进行 复杂 并 且 彼此 相关 的 设置 , 那么 使 用 工厂 模式 可 以 减少 每 种 对 象 所 需 的 代 
码 量 。 如 果 这 种 设置 只 需要 为 特定 类 型 的 所 有 实例 执行 一 次 即 可 ， 这 种 作用 尤其 突出 。 把 这 种 设 
置 代码 放 到 类 的 构造 函数 中 并 不 是 一 种 高 效 的 做 法 ,这 是 因为 即便 设置 工作 已 经 完成 , 每 次 创建 
新 实例 的 时 候 这 些 代码 还 是 会 执行 , 而且 这 样 做 会 把 设置 代码 分 散 到 不 同 的 类 中 。 工厂 方法 非常 
适合 于 这 种 场合 。 它 可 以 在 实例 化 所 有 需要 的 对 象 之 前 先 一 次 性 地 进行 设置 。 无论 有 多 少 不 同 的 
类 会 被 实例 化 ， 这 种 办 法 都 可 以 让 设置 代码 集中 在 一 个 地 方 。 
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如 果 所 用 的 类 要 求 加 载 外 部 库 的 话 , 这 尤其 有 用 。 工厂 方法 可 以 对 这 些 库 进 行 检查 并 动态 加 
载 那 些 未 找到 的 库 。 这 些 设 置 代码 只 存在 于 一 个 地 方 ， 因 此 以 后 改 起 来 也 方便 得 多 。 


7.3.3 用 许多 小 型 对 象 组 成 一 个 大 对 象 


工厂 方法 可 以 用 来 创建 封装 了 许多 较 小 对 象 的 对 象 。 考 虑 一 下 自行 车 对 象 的 构造 函数 。 自 行 
车 包含 着 许多 更 小 的 子 系统 : 车 轮 、 车 架 、 传 动 部 件 以 及 车 闸 等 。 如 果 你 不 想 让 某 个 子 系统 与 较 
大 的 那个 对 象 之 间 形 成 强 耦 合 ， 而 是 想 在 运行 时 从 许多 子 系统 中 进行 挑选 的 话 ， 那 么 工厂 方法 是 
一 个 理想 的 选择 。 使 用 这 种 技术 ， 某 天 你 可 以 为 售 出 的 所 有 自行 车 配 上 某 种 链条 ， 要 是 第 二 天 找 
到 为 一 种 更 中 意 的 链条 ， 可 以 改 而 采用 这 个 新 品种 。 实 现 这 种 改变 很 容易 ， 因 为 这 些 自 行车 类 的 
构造 函数 并 不 依赖 于 某 种 特定 的 链条 品种 。 本 章 后 面 RSS 阅 读 器 的 例子 演示 了 工厂 模式 在 这 方面 
的 用 途 。 


7.4 示例 : XHR 工厂 


用 Ajax 技术 发 起 异步 请 求 是 现在 Web 开 发 中 的 一 个 常见 任务 。 用 于 发 起 请 求 的 对 象 是 某 种 类 
的 实例 ， 具 体 是 哪 种 类 取决 于 用 户 的 浏览 器 。 如 果 代 码 中 需要 多 次 执行 Ajax 请 求 ， 那 么 明智 的 做 
法 是 把 创建 这 种 对 象 的 代码 提取 到 一 个 类 中 , 并 创建 一 个 包装 器 来 包装 在 实际 发 起 请 求 时 所 要 经 
历 的 一 系列 步骤 。 简 单 工厂 非常 适合 这 种 场合 ， 它 可 以 用 来 根据 浏览 器 能 力 的 不 同 生成 一 个 
XMLHttpRequest 或 ActiveX0bject 实 例 。 


/* AjaxHandler interface. */ 
var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXhrObject']); 
/* SimpleHandler class. */ 


var SimpleHandler = function() {}; // implements AjaxHandler 
SimpleHandler.prototype = { 
request: function(method, url, callback, postVars) { 
var xhr = this.createXhrObject(); 
xhr.onreadystatechange = function() { 
if(xhr.readyState !== 4) return; 
(xhr.status === 200) ? 
callback. success(xhr.responseText, xhr.responseXML) : 
callback. failure(xhr.status); 
}; 
xhr.open(method, url, true); 
if(method !== 'POST') postVars = null; 
xhr.send(postVars); 
}, 
createXhrObject: function() { // Factory method. 
var methods = [ 
function() { return new XMLHttpRequest(); }, 
function() { return new ActiveXObject(‘'Msxml2.XMLHTTP"); }, 
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function() { return new ActivexXObject('Microsoft.XMLHTTP’); } 


’ 


for(var i = 0, len = methods.length; i < len; i++) { 
try { 
methods[i](); 


catch(e) { 

continue; 
} 
// If we reach this point, method[i] worked. 
this.createXhrObject = methods[i]; // Memoize the method. 
return methods[i]; 


} 


// If we reach this point, none of the methods worked. 
throw new Error('SimpleHandler: Could not create an XHR object.'); 
} 
}; 
request 这 个 便利 函数 负责 执行 发 出 请 求 和 处 理 响 应 结果 所 需 的 一 系列 操作 。 它 先 创建 一 个 
XHR 对 象 并 对 其 进行 配置 ， 然 后 再 发 送 请 求 。 这 里 所 关注 的 是 用 于 创建 XHR 对 象 的 代码 。 
createXhr0bject 这 个 工厂 方法 根据 当前 环境 的 具体 情况 返回 一 个 XHR 对 象 。 在 首次 执行 时 ， 
它 会 依次 尝试 三 种 用 于 创建 XHR 对 象 的 不 同方 法 , 一 旦 遇 到 一 种 管用 的 , 它 就 会 返回 所 创建 的 对 
象 并 将 自身 改 为 用 以 创建 那个 对 象 的 函数 。 这 个 新 函数 于 是 摇身一变 成 了 createXhr0bject 方 法 。 
这 种 技术 被 称 为 memoizing”， 它 可 以 用 来 创建 存储 着 复杂 计算 的 函数 和 方法 以免 再 次 进行 这 种 
计算 。 所 有 那些 复杂 的 设置 代码 只 会 在 方法 首次 执行 时 被 调用 一 次 , 此 后 就 只 有 针对 当前 浏览 器 
的 代码 会 被 执行 。 假 如 前 面 的 代码 运行 在 一 个 实现 了 XMLHttpRequest 类 的 浏览 器 中 ， 那 么 第 二 次 
执行 时 的 createXhr0bject 方 法 实际 上 是 这 个 样子 : 
createXhrObject: function() { return new XMLHttpRequest(); } 
memoizing 技 术 可 以 提高 代码 的 效率 ， 因 为 所 有 设置 和 检测 代码 都 只 会 执行 一 次 。 工 厂 方法 
是 这 种 代码 的 理想 封装 工具 ， 不 管 代码 运行 在 什么 平台 上 ， 它 都 能 返回 正确 的 对 象 。 这 一 任务 涉 
及 的 复杂 性 由 此 被 集中 在 一 个 地 方 。 
用 SimpleHandler 类 发 起 异步 请 求 的 过 程 很 简单 , 只 要 创建 该 类 的 一 个 实例 , 调用 它 的 request 
方法 即 可 : 


var myHandler = new SimpleHandler(); 

var callback = { 
success: function(responseText) { alert('Success: ' + responseText); }, 
failure: function(statusCode) { alert('Failure: ' + statusCode); } 

}; 

myHandler.request('GET', 'script.php', callback); 


@ memoization 是 Donald Michie 根 据 拉丁 语 中 的 memorandum( 意 为 “ 记 住 ”"。 该 词 也 见于 现代 英语 ， 不 过 却 是 “备忘录 ” 
等 意思 ) 杜撰 的 一 个 词 。 相 应 的 动词 、 过 去 分 词 和 ing 形 式 分 别 为 memoiz、memoized 和 memoizing。 一 一 译 者 注 
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7.4.1 专用 型 连接 对 象 


这 个 例子 可 以 进一步 扩展 ,把 工厂 模式 用 在 两 个 地 方 ， 以 便 根据 网 络 条 件 创建 专门 的 请 求 对 
HR. 在 创建 XHR 对 象 时 已 经 用 过 了 简单 工厂 模式 。 男 一 个 工厂 则 用 来 返回 各 种 处 理 器 类 ， 它们 都 
派生 自 SimpleHandler。 

首先 要 做 的 是 创建 两 个 新 的 处 理 器 类 。QueuedHandler 会 在 发 起 新 的 请 求 之 前 先 确保 所 有 请 
求 都 已 经 成 功 处 理 。 而 0ff1ineHandler 则 会 在 用 户 处 于 离线 状态 时 把 请 求 缓存 起 来 。 

/* QueuedHandler class. */ 


var QueuedHandler = function() { // implements AjaxHandler 
this.queue = []; 
this.requestInProgress = false; 
this.retryDelay = 5; // In seconds. 


}; 
extend(QueuedHandler, SimpleHandler) ; 
QueuedHandler.prototype.request = function(method, url, callback, postVars, 


override) { 
if(this.requestInProgress && !override) { 
this. queue. push({ 
method: method, 
url: url, 
callback: callback, 
postVars: postVars 
})3 
} 
else { 
this.requestInProgress = true; 
var xhr = this.createXhrObject(); 
var that = this; 
xhr.onreadystatechange = function() { 
if(xhr.readyState !== 4) return; 
if(xhr.status === 200) { 
callback.success(xhr.responseText, xhr.responseXML); 
that.advanceQueue(); | 
} 
else { 
callback. failure(xhr.status); 
setTimeout(function() { that.request(method, url, callback, postVars, true); }, 
that.retryDelay * 1000); 
} 
}; 
xhr.open(method, url, true); 
if(method !== 'POST') postVars = null; 
xhr.send(postVars); 


F 
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QueuedHandler.prototype.advanceQueue = function() { 
if(this.queue.length === 0) { 
this.requestInProgress = false; 
return; 


} 
var req = this.queue.shift(); 
this.request(req.method, req.url, req.callback, req.postVars, true); 


QueueHandler 的 request 方 法 与 SimpleHandler 的 看 上 去 差不多 , 但 在 允许 发 起 新 请 求 之 前 它 会 
先 检查 一 下 ， 以 确保 当前 没有 别 的 请 求 正 在 处 理 。 如 果 有 哪个 请 求 未 能 成 功 处 理 ， 那 么 它 还 会 在 
指定 的 时 间 间 隔 之 后 再 次 重复 这 个 请 求 ， 直 到 该 请 求 被 成 功 处理 为 止 。 


0fflineHandler 要 简单 一 点 : 
/* OfflineHandler class. */ 


var OfflineHandler = function() { // implements AjaxHandler 
this.storedRequests = []; 


}; 
extend(OfflineHandler, SimpleHandler) ; 


OfflineHandler.prototype.request = function(method, url, callback, postVars) { 


if(XhrManager.isOffline()) { // Store the requests until we are online. 
this.storedRequests.push({ 


method: method, 
url: url, 
callback: callback, 
postVars: postVars 
H; 
} 


else { // Call SimpleHandler's request method if we are online. 
this. flushStoredRequests(); 


OfflineHandler.superclass.request(method, url, callback, postVars); 


} 
}; 
OfflineHandler.prototype. flushStoredRequests = function() { 


for(var i = 0, len = storedRequests.length; i < len; i++) { 
var req = storedRequests[i]; 


OfflineHandler.superclass.request(req.method, req.url, req.callback, 
req.postVars) ; 


} 
}5 


XhrManager .isOffline 方 法 〈 稍 后 会 详细 介绍 ) 的 作用 在 于 判断 用 户 是 否 处 于 在 线 状 态 。 
0fflineHandler 只 有 在 用 户 处 于 在 线 状态 时 才 会 使 用 Simp1eHandler 的 request 方 法 实际 发 起 请 求 。 
而 且 一 旦 探测 到 用 户 处 于 在 线 状态 ， 它 还 会 立即 执行 所 有 组 在 中 的 请 求 。 


7.4.2 在 运行 时 选择 连接 对 象 
现在 该 用 到 工厂 模式 了 。 因 为 程序 员 根 本 不 可 能 知道 各 个 最 终 用 户 实际 面临 的 网 络 条 件 ， 
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所 以 不 可 能 要 求 他 们 在 开发 过 程 中 选择 使 用 哪个 处 理 器 类 ， 而 是 应 该 用 一 个 工厂 在 运行 时 选 
择 最 合适 的 类 。 程 序 员 只 需要 调用 这 个 工厂 方法 并 使 用 其 返回 的 对 象 即 可 。 因 为 所 有 这 些 处 
理 器 类 都 实现 了 AjaxHandler 接 口 ， 所 以 它们 可 以 被 同等 对 待 。 接 口 是 相 同 的 ， 区 别 只 在 于 其 
实现 : 


/* XhrManager singleton. */ 


var XhrManager = { 
createXhrHandler: function() { 
var xhr; 
if(this.isOffline()) { 
xhr = new OfflineHandler(); 


else if(this.isHighLatency()) { 
xhr = new QueuedHandler(); 
} 


else { 
xhr = new SimpleHandler() 
} 


Interface.ensureImplements(xhr, AjaxHandler); 
return xhr 


}, 

isOffline: function() { // Do a quick request with SimpleHandler and see if 
ida // it succeeds. 

}, 


gd function() { // Do a series of requests with SimpleHandler and 
F // time the responses. Best done once, as a 
// branching function. 
} 
}; 


现在 程序 员 就 可 以 使 用 这 个 工厂 方法 ， 而 不 必 实 例 化 一 个 特定 的 类 了 : 


var myHandler = XhrManager.createXhrHandler() ; 

var callback = { 
success: function(responseText) { alert('Success: ' + responseText); }, 
failure: function(statusCode) { alert('Failure: ' + statusCode); } 


a 'script.php', callback); 

createXhrHandler 方 法 返回 的 各 种 对 象 都 具有 我 们 所 需要 的 一 些 方法 。 而 且 ， 因 为 它们 都 派 
生 自 SimpleHandler， 所 以 createXhr0bject 这 个 复杂 的 方法 只 需要 在 这 个 类 中 实现 一 次 即 可 ， 那 
些 子 类 可 以 使 用 这 个 方法 。0fflineHandler 中 还 有 多 处 使 用 了 Simp1leHandler 的 request 方 法 , 这 进 
一 步 实 现 了 代码 的 重用 。 

这 里 省 略 了 isoffline 和 isHighLatency 方 法 的 实现 细节 。 在 实际 实现 这 些 方法 的 时 候 ， 需 要 
先 编写 一 个 方法 ， 它 会 用 setTimeout 安 排 执 行 一 些 异步 请 求 ， 并 记录 它们 的 往返 时 间 。 只 要 这 些 
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请 求 中 的 任何 一 个 得 到 回应 , isO0ffline 方 法 就 会 返回 false, 否则 它 会 返回 true。 而 isHighLatency 
方法 会 检查 请 求 得 到 回应 所 经 历 的 时 间 ， 并 根据 其 长 短 来 决定 该 返回 true 还 是 false。 这 些 方法 
的 具体 实现 都 是 些 细 枝 末节 ， 这 里 不 再 著述 。 


7.5 示例 : RSS 阅读 器 


下 面 要 设计 的 是 一 个 用 来 在 网 页 上 显示 来 自 RSS 源 的 最 新 信息 的 小 工具 。 我们 打算 重用 一 些 
现 有 模块 ,比如 前 面 例 子 中 的 XHR 处 理 器 , 而 不 是 从 头 做 起 。 最 终 得 到 的 是 一 个 RSS 阅 读 器 对 象 ， 
它 的 成 员 对 象 包括 一 个 XHR 处 理 器 对 象 、 一 个 显示 对 象 以 及 一 个 配置 对 象 。 

由 于 我 们 只 想 跟 RSS 容 器 对 象 打 交道 ， 所 以 用 一 个 工厂 来 实例 化 这 些 内 部 对 象 并 把 它们 组 装 
到 一 个 RSS 阅 读 器 对 象 中 。 使 用 工厂 方法 的 好 处 在 于 ， 我 们 创建 的 RSS 阅 读 器 类 不 会 与 那些 成 员 
对 象 紧密 耦合 在 一 起 。 我 们 可 以 使 用 任何 一 个 显示 模块 ， 只 要 它 实现 了 必要 的 方法 就 行 ， 因 此 大 
可 不 必 让 阅读 器 类 套牢 在 某 个 特定 的 显示 类 上 。 

有 了 这 个 工厂 方法 ， 只 要 愿意 ， 我 们 可 以 随时 换 掉 任何 一 个 模块 ， 不 管 是 在 开发 期 间 还 是 在 
运行 期 间 。 使 用 这 个 API 的 程序 员 得 到 的 还 是 一 个 完整 的 RSS 阅 读 器 对 象 ， 其 中 所 有 的 成 员 对 象 
都 已 经 实例 化 并 配置 完毕 ， 但 其 中 涉及 的 类 之 间 的 耦合 都 比较 松散 ， 因 此 可 以 随意 更 换 。 

先 来 看 看 要 在 工厂 方法 中 进行 实例 化 的 那些 类 。XHR 处 理 器 类 你 已 经 见 过 了 。 本 例 使 用 
XhrManager .createXhrHandler 方 法 创建 所 用 的 处 理 器 对 象 。 下 一 个 类 是 显示 类 。 为 了 满足 RSS 阅 
读 器 类 的 需要 ， 它 需要 实现 几 个 方法 。 下 面 是 一 个 实现 了 那些 必要 方法 的 显示 类 ， 它 把 输出 内 容 
包装 为 一 个 无 序列 表 : 


/* DisplayModule interface. */ 
var DisplayModule = new Interface('DisplayModule', ['append', ‘remove’, ‘clear']); 
/* ListDisplay class. */ 


var ListDisplay = function(id, parent) { // implements DisplayModule 
this.list = document.createElement('ul'); 
this. list.id = id; 
parent.appendChild(this. list); 


ListDisplay.prototype = { 
append: function(text) { 
var newEl = document.createElement('1li'); 
this. list.appendChild(newE1); 
newEl.innerHTML = text; 
return newEl; 


remove: function(el) { 

this. list.removeChild(el); 
clear: function() { 

this. list.innerHTML = ''; 
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} 
}5 


下 一 个 要 用 到 的 是 配置 对 象 。 这 只 是 一 个 对 象 字面 量 , 它 包含 着 一 些 供 阅读 器 类 及 其 成 员 对 
象 使 用 的 设置 : 


/* Configuration object. */ 


var conf = { 

id: 'cnn-top-stories', 

feedUrl: ‘http://rss.cnn.com/rss/cnn_topstories.rss', 
updateInterval: 60, // In seconds. 

parent: $('feed-readers') 


[105] j 
这 些 类 都 由 一 个 名 为 FeedReader 的 类 组 合 使 用 。 它 用 XHR 处 理 器 从 RSS 源 获取 XML 格式 的 数 


据 并 用 一 个 内 部 方法 对 其 进行 解析 ， 然 后 用 显示 模块 将 解析 出 来 的 信息 输出 到 网 页 上 : 


/* FeedReader class. */ 


‘var FeedReader = function(display, xhrHandler, conf) { 
this.display = display; 
this.xhrHandler = xhrHandler; 
this.conf = conf; 


this.startUpdates(); 
}; 
FeedReader.prototype = { 
fetchFeed: function() { 
var that = this; 
var callback = { 
success: function(text, xml) { that.parseFeed(text, xml); }, 
failure: function(status) { that.showError(status); } 
}5 
this.xhrHandler.request('GET', 'feedProxy.php?feed=' + this.conf.feedUrl, 
callback); 
}, 
parseFeed: function(responseText, responseXML) { 
this.display.clear(); 
var items = responseXML.getElementsByTagName('item' ); 
for(var i = 0, len = items.length; i < len; i++) { 
var title = items[i].getElementsByTagName(‘title')[0]; 
var link = items[i].getElementsByTagName('link')[0]; 
this.display.append('<a href="' + link.firstChild.data + '">' + 
title.firstChild.data + '</a>'); 
} 
b 


showError: function(statusCode) { 
this.display.clear(); 
this.display.append('Error fetching feed.'); 
}, 
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stopUpdates: function() { 
clearInterval(this. interval); 


b 
startUpdates: function() { 
this.fetchFeed(); 
var that = this; 
this.interval = setInterval(function() { that.fetchFeed(); }, 
this.conf.updateInterval * 1000); 


} 

}; 

XHR 请 求 中 使 用 的 feedProxy .php 脚 本 是 一 个 代理 。 可 以 用 它 从 外 部 域 获取 数据 ， 以 应 对 
JavaScript 的 同 源 限制 机 制 。 那 种 允许 从 任何 URL 获 取 数 据 的 开放 性 代理 容易 被 洲 用 ,因此 应 该 避 
免 使 用 。 像 本 例 中 这 样 使 用 代理 时 ， 应 该 硬性 设 定 一 个 允许 访问 的 URL 的 白 名 单 (whitelist)， 拒 
绝对 未 列 入 其 中 的 URL 的 访问 。 

现在 还 差 一 个 部 分 ， 即 把 所 有 这 些 类 和 对 象 拼 装 起 来 的 那个 工厂 方法 。 它 被 实现 为 一 个 简单 
工厂 ， 如 下 所 示 : 


/* FeedManager namespace. */ 


var FeedManager = { 
createFeedReader: function(conf) { 
var displayModule = new ListDisplay(conf.id + '-display’, conf.parent); 
Interface.ensureImplements(displayModule, DisplayModule); 


var xhrHandler = XhrManager.createXhrHandler(); 
Interface.ensureImplements(xhrHandler, AjaxHandler) ; 


return new FeedReader(displayModule, xhrHandler, conf); 

4i 

这 个 工厂 方法 先 实例 化 所 需要 的 模块 ， 确 认 它 们 实现 了 正确 的 方法 ， 然 后 把 它们 传递 给 
FeedReader 构 造 函 数 。 

这 个 示例 中 的 工厂 方法 能 带 来 什么 好 处 呢 ? 使 用 这 个 API 的 程序 员 当 然 可 以 手工 创建 一 个 
FeedReader 对 象 ， 而 不 必 借助 FeedManager .createFeedReader 方 法 。 但 使 用 这 个 工厂 方法 ， 可 以 把 
FeedReader 类 所 需 的 复杂 设置 封装 起 来 ， 并 且 可 以 确保 其 成 员 对 象 都 实现 了 所 需 接 口 。 它 还 把 对 
所 使 用 的 特定 模块 的 硬性 设 定 (ListDisplay 和 XhrManager .createXhrHandler〉 集 中 在 一 个 位 置 。 
哪 天 要 是 想 使 用 ParagraphDisplay 和 QueuedHandler， 做 起 来 也 同样 简单 ， 只 要 改 改 这 个 工厂 方法 
内 部 的 代码 就 行 。 你 也 可 以 添加 一 些 代码 , 像 XHR 处 理 器 示例 中 所 示 的 那样 在 运行 期 间 从 一 些 可 
用 的 模块 中 进行 选择 。 总 而 言 之 ， 这 是 一 个 阐明 “用 许多 小 型 对 象 组 成 一 个 大 对 象 ”这 个 用 途 的 
绝 佳 示例 。 它 使 用 工厂 模式 ， 先 创建 出 所 有 要 用 到 的 对 象 ， 然 后 再 生成 并 返回 那个 作为 容器 的 
FeedReader 类 型 大 对 象 。 本 书 网 站 http://jsdesignpatterns.com/ 所 提供 的 第 7 章 的 示例 代码 中 有 一 个 
上 述 代 码 的 可 运行 版 本 ， 它 内 嵌 在 一 个 网 页 之 中 。 
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7.6 工厂 模式 之 利 


工厂 模式 的 主要 好 处 在 于 消除 对 象 间 的 耦合 。 通过 使 用 工厂 方法 而 不 是 new 关 键 字 及 具体 类 ， 
你 可 以 把 所 有 实例 化 代码 集中 在 一 个 位 置 。 这 可 以 大 大 简化 更 换 所 用 的 类 或 在 运行 期 间 动 态 选 择 
所 用 的 类 的 工作 。 在 派生 子 类 时 它 也 提供 了 更 大 的 灵活 性 。 使 用 工厂 模式 ， 你 可 以 先 创建 一 个 抽 
象 的 父 类 , 然后 在 子 类 中 创建 工厂 方法 , 从 而 把 成 员 对 象 的 实例 化 推迟 到 更 专门 化 的 子 类 中 进行 。 
107 所 有 这 些 好 处 都 与 面向 对 象 设计 的 这 两 条 原则 有 关 : 弱化 对 象 间 的 耦合 ;防止 代码 的 重复 。 
在 一 个 方法 中 进行 类 的 实例 化 , 可 以 消除 重复 性 的 代码 。 这 是 在 用 一 个 对 接口 的 调用 取代 一 个 具 

体 的 实现 。 这 些 都 有 助 于 创建 模块 化 的 代码 。 


7.7 IT RAZ H 


可 能 有 人 禁不住 想 把 工厂 方法 当 万 金 油 用 ， 把 普通 的 构造 函数 扔 在 一 边 。 这 并 不 值得 提倡 。 
如 果 根 本 不 可 能 另外 换 用 一 个 类 , 或 者 不 需要 在 运行 期 间 在 一 系列 可 互 换 的 类 中 进行 选择 ， 那 就 
不 应 该 使 用 工厂 方法 。 大 多 数 类 最 好 使 用 new 关 键 字 和 构造 函数 公开 地 进行 实例 化 。 这 可 以 让 代 
码 更 简单 易 读 。 你 可 以 一 眼 就 看 到 调用 的 是 什么 构造 函数 ， 而 不 必 去 查看 某 个 工厂 方法 以 便 知 道 
实例 化 的 是 什么 类 。 工 厂 方法 在 其 适用 场合 非常 有 用 ,但 切 勿 滥用 。 如 果 拿 不 定 主 意 ， 那 就 不 要 
用 ， 因 为 以 后 在 重 构 代 码 时 还 有 机 会 使 用 工厂 模式 。 


7.8 小 结 


本 章 讨 论 了 简单 工厂 和 工厂 模式 。 我 们 以 自行 车 商店 为 例 说 明了 二 者 之 间 的 差别 : 简单 工厂 
通常 男 外 使 用 一 个 类 或 对 象 封装 实例 化 操作 , 而 真正 的 工厂 模式 则 要 实现 一 个 抽象 的 工厂 方法 并 
把 实例 化 工作 推迟 到 子 类 中 进行 。 这 种 模式 有 几 种 明确 的 应 用 场合 。 它 主要 用 在 所 实例 化 的 类 的 
类 型 不 能 在 开发 期 间 确 定 ， 而 只 能 在 运行 期 间 确 定 的 情况 下 。 此 外 ， 如 果 存 在 着 许多 具有 复杂 的 
设置 开销 的 相关 对 象 , 或 者 想 创 建 一 个 包含 了 一 些 成 员 对 象 的 类 但 又 想 避 免 把 它们 紧密 耦合 在 一 
起 的 话 ， 那 么 这 也 是 这 种 模式 的 用 武之 地 。 不 要 盲目 地 把 工厂 模式 用 于 所 有 的 实例 化 任务 。 但 如 
果 运 用 得 当 的 话 ， 它 将 是 JavaScript 程 序 员 手 中 的 一 大 利器 。 
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桥接 模式 ” 


实现 API 的 时 候 ， 桥 接 模 式 非 常 有 用 。 实 际 上 ， 这 也 许 是 被 用 得 最 不 够 充分 的 模式 之 

E, 在 所 有 模式 中 ,这 种 模式 最 容易 立即 付 诸 实施 . 在 设计 一 个 JavaScript API 的 时 候 ， 

可 以 用 这 个 模式 来 弱化 它 与 使 用 它 的 类 和 对 象 之 间 的 耦合 。 按 GoF 的 定义 ， 桥 接 模式 的 作用 在 于 

“将 抽象 与 其 实现 隔离 开 来 , 以便 二 者 独立 变化 ”。 这 种 模式 对 于 JavaScript 中 常见 的 事件 驱动 的 编 

程 大 有 神 益 。 

如 果 你 刚 进入 JavaScript API 开 发 的 世界 ， 那 么 很 可 能 要 创建 许多 获取 方法 (getter)、 设 置 方 

法 (setter)、 请 求 方法 (requester) 以 及 别 的 基于 动作 的 方法 。 无 论 它 们 是 用 来 创建 Web 服 务 API 

还 是 普通 的 取 值 器 (accessor) 方法 和 赋值 器 (mutator) 方法 ， 在 实现 过 程 中 桥接 模式 都 有 助 于 
保持 API 代 码 的 简洁 。 


8.1 示例 : 事件 监听 器 


桥接 模式 最 常见 和 实际 的 应 用 场合 之 一 是 事件 监听 器 回调 函数 。 假 设 有 一 个 名 为 
getBeerById 的 API 函 数 ， 它 根据 一 个 标识 符 返 回 有 关 某 种 啤酒 的 信息 。 当 然 , 在 Web 应 用 软件 中 ， 
你 希望 在 用 户 执行 某 种 操作 《比如 点 击 一 个 元 素 ) 时 获取 这 种 信息 。 那 个 被 点 击 的 元 素 很 可 能 具 
有 啤酒 的 标识 符 信息 ， 它 可 能 是 作为 元 素 自身 的 ID 保存 ， 也 可 能 是 作为 别 的 自 定 义 属性 保存 。 下 

addEvent(element, ‘click’, getBeerById); 

function getBeerByld(e) { 

var id = this.id; 
asyncRequest('GET', "beer.uri?id=" + id, function(resp) { 
// Callback response. 
console. log('Requested Beer: ' + resp.responseText); 


}); 
} 


可 以 看 出 这 是 一 个 只 能 工作 在 浏览 器 中 的 API。 根 据 事件 监听 器 回调 函数 的 工作 机 制 ， 事 件 
对 象 目 然 会 被 作为 第 一 个 参数 传递 给 这 个 函数 。 在 本 例 中 并 没有 使 用 这 个 参数 ， 而 只 是 从 this 对 


D 注意 本 章 中 所 说 的 “接口 "， 基 本 上 都 是 指 API (应 用 编程 接口 ) 一 词 中 那个 接口 ， 而 不 是 第 2 章 所 说 的 接口 的 意 
思 。 后 面 的 各 章 有 时 也 有 这 种 情况 ， 读 者 当 能 自行 分 辨 ， 故 不 再 著述 。 一 一 译 者 注 
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象 获取 ID。 如 果 你 要 对 这 个 API 函 数 做 单元 测试 ， 或 更 有 甚 者 ， 在 命令 行 环境 中 执行 它 ， 那 就 只 
有 祝 你 好 运 了 。 对 于 API 开 发 来 说 ， 最 好 从 一 个 优良 的 API 开 始 ， 不 要 把 它 与 任何 特定 的 实现 搅 
在 一 起 。 毕 竟 ， 我 们 希望 所 有 人 都 能 获取 到 啤酒 的 信息 : 


function getBeerById(id, callback) { 
// Make request for beer by ID, then return the beer data. 
asyncRequest('GET', ‘beer.uri?id=" + id, function(resp) { 
// callback response 
callback(resp.responseText) ; 
}); 
} 


你 想必 也 会 同意 : 这 个 版 本 要 实用 得 多 。 从 逻辑 上 讲 ， 把 也 作为 参数 传递 给 一 个 名 为 
getBeerById 的 函数 是 合情合理 的 。 正 如 大 多 数 “getter” 函 数 所 做 的 那样 ， 这 里 使 用 了 一 个 回调 
函数 。 向 服务 器 请 求 提供 信息 时 ， 回 应 结果 总 是 通过 一 个 回调 函数 返回 。 现在， 我们 将 针对 接口 
而 不 是 实现 进行 编程 (就 像 第 2 章 所 说 的 那样 )， 用 桥接 模式 把 抽象 隔离 开 来 。 看 看 修改 后 的 那个 
事件 监听 器 ; 


addEvent(element, ‘click’, getBeerByIldBridge); 

function getBeerByIdBridge (e) { 
getBeerById(this.id, function(beer) { 

© console. log( ‘Requested Beer: ‘+beer); 


3 


} 

有 了 这 层 桥接 元 素 ， 这 个 API 的 适用 范围 大 大 拓宽 了 ， 这 给 了 你 更 大 的 设计 自由 。 因 为 现在 
getBeerById 并 没有 和 事件 对 象 捆 绑 在 一 起 ， 你 可 以 在 单元 测试 中 运行 这 个 API。 只 需 提供 一 个 ID 
和 回调 函数 ， 看 哪 ， 唾 手 可 得 的 啤酒 ! 此 外 ， 你 也 可 以 在 命令 行 环境 中 (比如 使 用 Firebug 或 
Venkman) 对 这 个 接口 进行 快速 测试 。 


8.2 ”桥接 模式 的 其 他 例子 


亲口 之 间 进 行 桥接 外 ， 桥 接 模式 也 可 以 用 于 连接 公开 的 API 代 码 和 私 
本 以 甩 来 把 多 个 类 联结 在 一 起 。 从 类 的 角度 来 看 ， 这 意味 着 把 接口 作 





/ ”如果 一 个 公用 的 接口 搬 象 了 一 些 也 许 应 该 属于 私 用 性 的 (尽管 在 此 情况 下 它 不 一 定 非得 是 私 


nt ) Zeit ， 那 和 可 以 使 用 桥接 模式 来 收集 某 些 私 用 性 的 信息 。 可 以 用 一 些 具 有 特殊 权 
利 展 访 法 在 为 桥 染 以 使 访问 私 用 变 基 室 间 ， 而 不 必 冒 险 下 到 具体 实现 的 浑 水 中 。 这 一 特例 中 的 桥 
BOL Hh Me? 第 3 章 对 此 有 详细 说 明 。 
var Public = function() { 

var secret = 3; 

this.privilegedGetter = function() { 

return secret; 

l 
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Var 0 = new Public; 
var data = o.privilegedGetter(); 


8.3 ”用 桥接 模式 联结 多 个 类 
在 现实 生活 中 桥梁 可 以 把 多 种 事物 联结 起 来 ， 在 JavaSeript 中 也 是 如 此 : 


var Classi = function(a, b, c) { 
this.a = a; 
this.b = b; 
this.c = c; 

} 

var Class2 = function(d) { 
this.d = d; 

}; 


var BridgeClass = function(a, b, c, d) { 
this.one = new Classi(a, b, c); 
this.two = new Class2(d); 


这 看 起 来 很 像 是 一 一 适配器 。 

的 确 如 此 。 但 要 注意 到 本 例 中 实际 上 并 没有 客户 系统 要 求 提供 数据 。 它 只 不 过 是 用 来 接纳 大 
量 数据 并 将 其 发 送 给 责任 方 的 一 种 辅助 性 手段 。 此 外 ，BridgeC1ass 也 不 是 一 个 客户 系统 已 经 实 
现 的 现 有 接口 。 引 入 这 个 类 的 目的 只 不 过 是 要 桥接 一 些 类 而 已 。 

有 人 可 能 会 争辩 说 引入 这 个 桥接 类 完全 是 为 了 方便 ， 实 际 上 它 就 是 一 个 门面 类 (facade) 的 


角色 。 但 是 ， 这 里 使 用 桥接 模式 是 为 了 让 Class1 和 Class2 能 够 独立 于 BridgeClass 而 发 生 改变 ， 这 


与 门面 类 是 不 同 的 。 
8.4 示例 : 构建 XHR 连接 队列 


在 本 例 中 我 们 要 构建 一 个 Ajax 请 求 队列 。 这 个 对 象 把 请 求 存储 在 浏览 器 内 存 中 的 一 个 队列 
化 数组 中 。 刷 新 队列 时 每 个 请 求 都 会 按 “ 先 入 先 出 ”的 顺序 被 发 送 给 一 个 后 端的 Web 服 务 。 如 
果 次 序 事 关 紧要 , 那么 在 Web 应 用 程序 中 使 用 队列 化 系统 是 有 好 处 的 。 另外 队列 还 有 一 个 好 处 : 
可 以 通过 从 队列 中 删除 请 求 来 实现 应 用 程序 的 “取消 ”功能 。 电 子 邮 件 程序 、 富 文本 编辑 器 或 
任何 涉及 因 用 户 输入 引起 的 频繁 动作 的 系统 都 是 适用 的 例子 。 最后， 连接 队列 可 以 帮助 用 户 克 
服 慢 速 网 络 连 接 带 来 的 不 便 ， 甚 至 可 以 允许 他 们 离线 工作 。 当 然 ， 要 想 把 请 求 发 给 服务 器 ， 还 
是 需要 重建 连接 。 

队列 系统 开发 出 来 后 ,我们 会 找 出 那些 存在 强 耦 合 的 抽象 的 部 分 ， 然 后 用 桥接 模式 把 抽象 与 
实现 分 开 。 在 此 你 几乎 可 以 立即 看 出 使 用 桥接 模式 的 好 处 。 


8.4.1 添加 核心 工具 
在 着 手工 作 之 前 需要 先 准备 一 些 核 心 工具 函数 。 因为 要 通过 XMLHttpRequest 与 服务 器 通信 ， 
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所 以 需要 用 下 面 这 个 asyncRequest 函 数 〈 第 11 章 讲 适 配器 模式 时 也 要 用 到 它 ) 解决 浏览 器 的 差异 
问题 : 
var asyncRequest = (function() { 
function handleReadyState(o, callback) { 
var poll = window.setInterval( 
function() { 
if (o && o.readyState == 4) { 
window. clearInterval(poll); 
if (callback) { 
callback(o); 


var getXHR = function() { 
var http; 
try { 
http = new XMLHttpRequest; 
getXHR = function() { 
return new XMLHttpRequest; 


f; 


} 
catch(e) { 
var msxml = [ 
"MSXML2.XMLHTTP.3.0', 
"MSXML2.XMLHTTP' , 


"Microsoft. XMLHTTP’ 

J; i 

for (var i = 0, len = msxml.length; i < len; ++i) { 
try { 


http = new ActiveXObject(msxml[i]); 
getXHR = function() { 
return new ActivexObject(msxml[i]); 


}; 
break; 
} 
catch(e) {} 
} 
return http; 


}; 

return function(method, uri, callback, postData) { 
var http = getXHR(); 
http.open(method, uri, true); 
handleReadyState(http, callback); 
http.send(postData || null); 
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return http; 
}; 
HO; 


有 了 下 面 的 代码 ， 我 们 就 可 以 用 类 似 于 讲述 链 式 调用 的 第 6 章 中 的 风格 进行 开发 : 


Function.prototype.method = function(name, fn) { 
this.prototype[name] = fn; 
return this; 
}; 
最 后 要 添加 的 是 两 个 新 的 数组 方法 :forEach 和 filter。 这 是 对 Array 的 原型 对 象 的 扩展 。 它 
们 是 在 JavaScript 1.6 语 言 核心 中 引入 的 ， 而 目前 大 多 数 浏览 器 使 用 的 还 是 1.5 版 的 语言 核心 。 我 们 
先 检查 一 下 浏览 器 有 没有 实现 这 些 方法 ， 如 果 没 有 ， 就 添加 进去 : 
if ( !Array.prototype.forEach ) { 
Array.method('forEach', function(fn, thisObj) { 
var scope = thisObj || window; 
for ( var i = 0, len = this.length; i < len; ++i ) { 
fn.call(scope, this[i], i, this); 


}); 
} 


if ( !Array.prototype.filter ) { 
Array.method('filter', function(fn, thisObj) { 
var scope = thisObj || window; 
var a = []; 
for ( var i = 0, len = this.length; i < len; ++i ) { 
if ( !fn.call(scope, this[i], i, this) ) { 
continue; 


} 
a.push(this[i]); 


return a; 
H; 
} [113] 
Mozilla 开发 人 员 中 心 网 站 (http://developermozilla.org/en/docs/New in JavaScript 1.6# Array_ 
extras) 上 有 关于 这 些 数组 方法 的 详细 说 明 。 


8.4.2 ”添加 观察 者 系统 


观察 者 系统 在 监听 队列 向 客户 发 送 的 事件 通知 的 过 程 中 扮演 着 一 个 关键 角色 。 关 于 观察 者 的 
详细 信息 参见 第 15 章 。 现 在 我 们 要 添加 的 是 一 个 基本 的 系统 : 
window.DED = window.DED || {}; 
DED.util = DED.util || {}; 
DED.util.Observer = function() { 
this.fns = []; 
} 
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DED.util.Observer.prototype = { 
subscribe: function(fn) { 
this. fns.push(fn) ; 
}, 
unsubscribe: function(fn) { 
this.fns = this. fns.filter( 
function(el) { 
if ( el !== fn ) { 
return el; 
} 
} 
) 
}, 
fire: function(o) { 
this. fns. forEach( 
function(el) { 
el(o); 


); 
} 
J; 


8.4.3 ”开发 队列 的 基本 框架 


在 这 一 特定 系统 中 ， 我 们 希望 该 队列 具有 一 些 关 键 特 性 。 首 先 ， 它 必须 是 一 个 真正 的 队列 ， 
遵从 先入 先 出 的 基本 规则 。 与 此 不 同 ， 栈 则 有 先入 后 出 的 特点 ， 因 此 不 是 我 们 的 目标 。 
因为 这 是 一 个 用 于 存储 待 发 请 求 的 连接 队列 ， 所 以 你 可 能 希望 设置 “ 重 试 ” 的 次 数 限制 。 此 
外 ， 根 据 每 个 队列 的 请 求 的 大 小 ， 你 可 能 也 希望 能 设置 “超时 ”限制 。 
最 后 ， 我 们 应 该 能 够 向 队列 添加 新 请 求 和 清空 队列 ， 当 然 ， 还 要 能 够 刷新 队列 。 此 外 还 应 该 
mia) 可 以 从 队列 中 删除 请 求 ， 这 种 操作 称 为 出 列 (dequeue): 


DED.Queue = function() { 
// Queued requests. 
this.queue = []; 


// Observable Objects that can notify the client of interesting moments 
// on each DED.Queue instance. 

this.onComplete = new DED.util.Observer; 

this.onFailure = new DED.util.Observer; 

this.onFlush = new DED.util.Observer; 


// Core properties that set up a frontend queueing system. 
this.retryCount = 3; 

this.currentRetry = 0; 

this.paused = false; 

this.timeout = 5000; 

this.conn = {}; 

this.timer = {}; 
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}; 


DED. Queue. 
method('flush', function() { 

if (!this.queue.length > 0) { 
return; 

} 

if (this.paused) { 
this.paused = false; 
return; 


var that = this; 
this.currentRetry++; 
var abort = function() { 
that.conn.abort(); 
if (that.currentRetry == that.retryCount) { 
that.onFailure. fire(); 
that.currentRetry = 0; 
} else { 
that. flush(); 
} 
}; 
this.timer = window.setTimeout(abort, this.timeout); 
var callback = function(o) { 
window.clearTimeout (that.timer); 
that.currentRetry = 0; 
that. queue. shift(); 
that.onFlush. fire(o.responseText) ; 
if (that.queue.length == 0) { 
that.onComplete. fire(); 
return; 
} 
// recursive call to flush 
that. flush(); 
J; 
this.conn = asyncRequest( 
this.queue[0]['method'], 
this.queue[0][‘uri'], 
callback, 
this.queue[0]['params' ] 
); 
}). 
method('setRetryCount', function(count) { 
this.retryCount = count; 
}). 
method('setTimeout', function(time) { 
this.timeout = time; 
}). 
method('add', function(o) { 
this.queue.push(o); 


www.TopSage.com 


107 


108 第 8 章 桥接 模式 


}). 

method('pause', function() { 
this.paused = true; 

}). 

method( ‘dequeue’, function() { 
this. queue. pop(); 

}). 

method('clear', function() { 
this.queue = []; 


}); 

这 段 代 码 乍 一 看 可 能 有 点 令 人 望而却步 ， 不 过 你 可 以 快速 浏览 一 下 DED.Queue 类 ， 看 看 其 主 
要 方法 : flush、setRetryCount、setTimeout、add、pause、dequeue 和 clear。queue 属 性 是 一 个 
数组 字面 量 ， 用 于 保存 对 每 一 个 请 求 的 引用 。add 和 dequeue 这 类 方法 所 做 的 只 是 对 这 个 数组 进行 
push 和 pop 操 作 。flush 方 法 则 会 把 请 求 发 送出 去 并 将 它们 移出 数组 。 


8.4.4 ”实现 队列 
队列 系统 的 实现 如 下 : 


var q = new DED.Queue; 
// Reset our retry count to be higher for slow connections. 
q.setRetryCount(s); 
// Decrease timeout limit because we still want fast connections to benefit. 
q.setTimeout (1000) ; 
// Add two slots. 
q.add({ 
method: ‘GET’, 
uri: '/path/to/file.php?ajax=true’ 
}); 
q.add({ 
method: 'GET', 
uri: '/path/to/file.php?ajax=true&woe=me' 
}); 
// Flush the queue. 
q.flush(); 
// Pause the queue, retaining the requests. 
q-pause(); 
// Clear our queue and start fresh. 
q.clear(); 
// Add two requests. 
q.add({ 
method: ‘GET’, 
uri: '/path/to/file.php?ajax=true' 


}); 
q.add({ 

method: ‘GET’, 

uri: '/path/to/file.php?ajax=true&woe=me' 
}); 


// Remove the last request from the queue. 
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q.dequeue(); 
// Flush the queue again. 
q.flush(); 


迄今 为 止 一 切 还 算 顺 利 。 这 个 队列 应 该 不 难 理解 。 但 现在 你 可 能 会 寻思 其 中 有 哪些 地 方 用 了 
桥接 模式 。 实 际 上 到 目前 为 止 还 没有 用 到 这 个 模式 。 但 到 了 实现 的 时 候 ， 你 会 看 到 桥接 元 素 无 处 
不 在 。 下 面 的 代码 示范 了 客户 系统 的 实现 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<title>Ajax Connection Queue</title> 
<script src="utils.js"></script> 
<script src="queue. js"></script> 
<script type="text/javascript"> 
addEvent(window, ‘load', function() { 
// Implementation. 
var q = new DED.Queue; 
q.setRetryCount (5); 
q.setTimeout (3000) ; 


var items = $('items'); 
var results = $(‘results'); 
var queue = $('queue-items'); 


// Keeping track of my own requests as a client. 
var requests = []; 


// Notifier for each request that is being flushed. 
q.onFlush.subscribe(function(data) { 

results.innerHTML = data; 

requests. shift(); 

queue.innerHTML = requests. toString(); 
}); 
// Notifier for any failures. 
'q.onFailure.subscribe(function() { 

results.innerHTML += ' <span style="color:red;">Connection Error!</span>' ; 
}); 
// Notifier of the completion of the flush. 
q.onComplete.subscribe(function() { 

results.innerHTML += ' <span style="color:green;">Completed!</span>' ; 
}); : 
var actionDispatcher = function(element) { 
switch (element) { 

case 'flush': 

q.flush(); 
break; 
case ‘dequeue’: 
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q.dequeue(); 
requests.pop(); 
queue.innerHTML = requests. toString(); 
break; 

case ‘pause’: 
q.pause(); 
break; 

case ‘clear’: 
q.clear(); 
requests = []; 
queue. innerHTML F 
break; 


} 
}; 


var addRequest = function(request) { 
var data = request.split('-')[1]; 
q.add({ 
method: ‘GET’, 
uri: ‘bridge-connection-queue .php?ajax=true&s='+data, 
params: null 


}); 

requests.push(data) ; 

queue.innerHTML = requests. toString(); 
}5 


addEvent(items, ‘click’, function(e) { 
var e = e || window.event; 
var src = e.target || e.srcElement; 
try { 
e.preventDefault(); 


} 

catch (ex) { 
e.returnValue = false; 

} 

actionDispatcher(src.id); 


H; 


var adders = $('adders'); 
addEvent(adders, ‘click’, function(e) { 
var e = e || window.event; 
var src = e.target || e.srcElement; 
try { 
e.preventDefault(); 


} 
catch (ex) { 
e.returnValue = false; 


} 
addRequest (src. id); 


}); 
}); 
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</script> 
<style type="text/css" media="screen"> 
body { font: 100% georgia,times,serif; } 
hi, h2 { font-weight: normal; } 
#queue-items { height: 1.5em; } 
#add-stuff { 
padding: .5em; 
background: #ddd; 
border: ipx solid #bbb; 


#results-area { padding: .Sem;border: 1px solid #bbb; } 
</style> 
</head> 
<body id="example"> 
<div id="doc"> 
<hi>Ajax Connection Queue</h1> 
<div id="queue-items"></div> 
<div id="add-stuff"> 
<h2>Add Requests to Queue</h2> 
<ul id="adders"> 
<li><a href="#" id="action-01">Add "01" to Queue</a></li> 
<li><a href="#" id="action-02">Add "02" to Queue</a></1li> 
<li><a href="#" id="action-03">Add "03" to Queue</a></1li> 
</ul> 
</div> 
<h2>0ther Queue Actions</h2> 
<ul id='items'> 
<li><a href="#" id="flush">Flush</a></li> 
<li><a href="#" id="dequeue">Dequeue</a></1i> 
<li><a href="#" id="pause">Pause</a></1i> 
<li><a href="#" id="clear">Clear</a></li> 
</ul> 
<div id="results-area"> 
<h2>Results: </h2> 
<div id="results"></div> 


</div> 
</div> 
</body> 
</html> 
这 段 代码 会 生成 一 个 相当 朴实 的 用 户 界面 ， 如 图 8-1 所 示 。 


图 8-1 中 顶部 的 区 域 用 于 向 DED.Queue 添 加 新 请 求 ， 底 部 的 区 域 用 于 执行 其 他 方法 。 往 队列 中 
加 入 一 些 请 求 之 后 ， 你 会 看 到 大 致 如 图 8-2 所 示 的 画面 。 

反复 点 击 Dequeue 这 个 链接 ， 删 除 DED.Queue 实 例 中 最 后 的 3 个 请 求 。 结 果 如 图 8-3 所 示 。 

点 击 Flush 这 个 链接 ， 送 出 两 个 请 求 ， 然 后 点 击 Pause。 结 果 如 图 8-4 所 示 。 

所 有 请 求 处 理 完毕 之 后 ，Results 区 域 会 提示 : 队列 处 理 完毕 ， 所 有 请 求 均 已 发 出 。 注 意图 8-5 
中 02 是 队列 中 最 后 一 个 送出 的 请 求 。 
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B00 Nax Connection Quee O 
Ajax Connection Queue 


Add Requests to Queue 
® Add ol to Queue 














图 8-1 
i908 — —— Alax Connection Queue OO O66... Nm Oy 
Ajax Connection Queue Ajax Connection Queue | 
| 01,02,03,02,01,02,03,01,01 01,02,03,02,01,02 | 
图 8-2 
| Results: 
Processed: 02 Completed! 
03,02,01,02 : j = Sy A FE ii 
[121] 图 8-4 图 8-5 


8.4.5 ”哪些 地 方 用 了 桥接 模式 


这 个 应 用 程序 中 到 处 都 有 桥接 元 素 的 身影 。 既 然 要 设计 一 个 无 可 挑剔 的 队列 接口 ， 那 就 得 在 
所 有 恰当 的 地 方 用 上 桥接 模式 。 最 明显 的 是 ， 事 件 监听 器 回调 函数 并 不 直接 与 队列 打交道 ， 而 是 
使 用 了 桥接 函数 ， 这 些 桥接 函数 控制 着 动作 工厂 并 料理 数据 输入 事宜 。 

不 过 ， 有 一 个 地 方 可 以 再 做 些 改进 。 用 户 点 击 一 个 链接 以 添加 一 个 请 求 的 时 候 ， 代 码 先 要 执 
行 一 些 基本 逻辑 ， 然 后 把 所 点 击 的 元 素 的 ID 传递 给 addRequest 函数 。 但 这 个 参数 值 并 不 是 
addRequest 上 函数 所 期 待 的 。 它 需要 的 应 该 是 一 个 普通 的 数值 ID 而 不 是 混合 型 的 字符 串 。 因 此 ， 我 
们 可 以 把 代码 从 这 个 形式 : 


var addRequest = function(request) { 
var data = request.split('-')[1]; 
fv. etc... 


2 


www.TopSage.com 


8.7 桥接 模式 之 准 113 


改 为 这 个 形式 : 
var addRequest = function(data) { 
Lf etc... 

}; 

毕 竞 ，addRequest 函 数 实际 上 只 是 要 查 一 下 数据 中 有 些 什么 而 已 ， 不 是 吗 ? 现在 可 以 添加 一 
个 中 间 性 的 桥梁 函数 : 

var addRequestFromClick = function(request) { 

addRequest(request.split('-')[0]); 

}; 

在 供用 户 执行 刷新 和 暂停 操作 的 部 分 ,我 们 提供 了 一 个 动作 调度 函数 ， 其 作用 就 是 桥接 用 户 
操作 所 包含 的 输入 信息 并 将 其 委托 给 恰当 的 处 理 代码 。 在 DOM 脚 本 编程 中 这 种 技术 也 称 为 事件 
委托 (event delegation)。click 事 件 所 代表 的 用 户 操 作 与 DED.Queue 实 现 完全 分 开 的 结果 就 是 ， 后 
者 的 方法 并 不 直接 与 那些 事件 耦合 在 一 起 ， 因 此 你 可 以 在 任何 地 方 执行 这 些 方法 。 你 可 以 在 
JavaScript 控 制 台 命令 行 环境 中 调用 它们 ， 也 可 以 对 它们 进行 单元 测试 。 它 们 也 可 以 被 关联 到 
mouseover 或 focus 等 其 他 浏览 器 事件 。 其 具体 用 法 五 花 八 门 , 客户 系统 只 需 提供 桥接 性 元 素 即 可 。 


8.5 ”桥接 模式 的 适用 场合 


很 难 想象 ,不 使 用 桥接 模式 的 事件 驱动 编程 会 是 什么 样子 。 但 是 JavaScript 编 程 新 手 们 常常 沉 
迷 于 事件 驱动 开发 的 范 数 式 风格 ， 忘 了 编写 接口 一 一 哪怕 面 对 的 是 复杂 操作 。 判 断 什么 地 方 应 该 
使 用 桥接 模式 通常 很 简单 。 假 如 有 下 面 的 代码 : 


$('example').onclick = function() { 
new RichTextEditor(); 

}; 

从 中 你 无 法 看 出 那个 编辑 器 要 显示 在 什么 地 方 、 它 有 些 什么 配置 选项 以 及 应 该 怎样 修改 它 。 
这 里 的 要 诀 是 要 让 接口 “可 桥接 (bridgeable)”， 实 际 上 也 就 是 可 适 配 〈adaptable。 人 参见 第 11 章 )。 

在 现实 生活 中 ， 桥 梁 对 于 城市 建设 和 城中 街道 的 连通 至 关 重 要 。 城 区 相当 于 模块 ， 而 街道 则 
相当 于 把 它们 连接 在 一 起 的 方法 。 道 路 的 可 用 性 往往 影响 着 该 片区 的 大 口 数量 。 同 样 ， 你 向 客户 
提供 的 接口 极 有 可 能 影响 到 模块 的 受 欢 迎 程度 。 


8.6 ”桥接 模式 之 利 


掌握 如 何在 软件 开发 中 实现 桥接 模式 ， 受 益 的 不 只 是 你 ， 还 有 那些 负责 维护 你 的 作品 的 人 。 
把 抽象 与 其 实现 隅 离开 ， 有 助 于 独立 地 管理 软件 的 各 组 成 部 分 。Bug 也 因此 更 容易 查找 ， 而 软件 
发 生 严重 故障 的 可 能 性 也 减 小 了 。 说 到 底 ， 桥 接 元 素 应 该 是 粘 合 每 一 个 抽象 的 粘 合 因子 。 


8.7 tHE ZH 


在 我 们 看 来 ， 这 种 模式 并 没有 多 少 真正 的 缺点 。 前 面 讲 述 它 的 优点 的 时 候 已 经 提 过 ， 它 只 会 
让 API 更 加 健壮 、 提 高 组 件 的 模块 化 程度 并 促成 更 简洁 的 客户 系统 实现 。 不 过 ， 这 些 益处 的 确 是 
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有 代价 的 。 每 使 用 一 个 桥接 元 素 都 要 增加 一 次 函数 调用 , 这 对 应 用 程序 的 性 能 会 有 一 些 负面 影响 。 
此 外 ,它们 也 提高 了 系统 的 复杂 程度 ， 在 出 现 问 题 时 这 会 导致 代码 更 难 调试 。 大 多 数 情况 下 桥接 
模式 都 非常 有 用 ， 但 注意 不 要 滥用 。 举 个 例 来 说 ， 如 果 一 个 桥接 函数 被 用 于 连接 两 个 函数 ， 而 其 
中 某 个 函数 根本 不 会 在 桥接 函数 之 外 被 调用 ,那么 此 时 这 个 桥接 函数 就 不 是 非 要 不 可 ， 你 可 以 放 
心 将 它 删除 。 


8.8 小 结 


用 GoF 的 话 来 说 ， 桥 接 模式 “将 抽象 与 其 实现 隔离 开 来 ， 以 便 二 者 独立 变化 "。 它 可 以 促进 
代码 的 模块 化 、 促 成 更 简洁 的 实现 并 提高 抽象 的 灵活 性 。 它 可 以 用 来 把 一 组 类 和 函数 连接 起 来 ， 
[123] 而 且 提供 了 一 种 借助 于 特权 函数 访问 私 用 数据 的 手段 。 
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组 合 模 式 


DE ARRE oe eee 使 用 这 种 模式 ， 可 
以 用 一 条 命令 在 多 个 对 象 上 激发 复杂 的 或 递归 的 行为 。 这 可 以 简化 粘 合 性 代码 ， 使 其 
更 容易 维护 ， 而 那些 复杂 行为 则 被 委托 给 各 个 对 象 。 

组 合 模式 为 操劳 过 度 的 JavaScript 程 序 员 带 来 了 两 大 好 处 。 

(1) 你 可 以 用 同样 的 方法 处 理 对 象 的 集合 与 其 中 的 特定 子 对 象 。 组 合 对 象 (composite) 与 组 
成 它 的 对 象 实现 了 同一 批 操作 。 对 组 合 对 象 执 行 的 这 些 操作 将 向 下 传递 到 所 有 的 组 成 对 象 
(constituent object)， 这 样 一 来 所 有 的 组 成 对 象 都 会 执行 同样 的 操作 。 在 存在 大 批 对 象 的 情况 下 ， 
这 是 一 种 非常 有 效 的 技术 。 籍 此 你 可 以 不 着 痕迹 地 用 一 组 对 象 替换 一 个 对 象 ， 反 之 亦 然 。 这 有 助 
于 弱化 各 个 对 象 之 间 的 耦合 。 

D 它 可 以 用 来 把 一 批 子 对 象 组 织 成 树 形 结构 ， 并 且 使 整 棵 树 都 可 被 遍历 。 所 有 组 合 对 象 都 
实现 了 一 个 用 来 获取 其 子 对 象 的 方法 。 借助 这 个 方法 ,你 可 以 隐藏 实现 的 细节 并 随心 所 欲 地 组 织 
子 对 象 。 任 何 使 用 这 个 对 象 的 代码 都 不 会 对 其 内 部 实现 形成 依赖 。 

本 章 将 示范 在 JavaScript 中 实现 组 合 模 式 的 方法 ， 并 讨论 其 适用 场合 。 125 


91 组合 对 象 的 结构 


如 图 9-1 所 示 ， 在 组 合 对 象 的 层次 体系 中 有 两 种 
类 型 的 对 象 ， 叶 对 象 和 组 全 对象。 这 是 一 个 递归 定 
义 ， 但 这 正 是 组 合 模式 如 此 有 用 的 原因 所 在 。 一 个 
组 合 对 象 由 一 些 别 的 组 合 对 象 和 叶 对 象 组 成 。 其 中 A 
只 有 叶 对 象 不 再 包含 子 对 象 。 叶 对 象 是 组 合 对 象 中 /一 
最 基本 的 元 素 ， 也 是 各 种 操作 的 落实 地 点 。 (mane ) 


92 ”使 用 组 合 模式 a TR 


只 有 同时 具备 如 下 两 个 条 件 时 才 适 合 使 用 组 合 CICICICTIC 
模式 : ry ey N 
O 存在 一 批 组 织 成 某 种 层次 体系 的 对 象 〔 具 体 图 9-1 组 合 设计 模式 的 基本 结构 
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的 结构 在 开发 期 间 可 能 无 法 得 知 )。 
D 希望 对 这 批 对 象 或 其 中 的 一 部 分 对 象 实施 一 个 操作 。 
组 合 模式 擅长 于 对 大 批 对 象 进行 操作 。 它 专 为 组 织 这 类 对 象 并 把 操作 从 一 个 层次 向 下 一 层次 
传递 而 设计 。 藉 此 你 可 以 弱化 对 象 间 的 耦合 并 可 互 换 地 使 用 一 些 类 或 实例 。 按 这 种 模式 编写 的 代 
码 模块 化 程度 更 高 ， 也 更 容易 维护 。 


93 示例 : 表单 验证 


假设 你 接手 了 一 个 新 项 目 。 乍 一 看 任务 很 简单 : 创建 一 个 表单 ， 要 求 可 以 保存 、 恢 复 和 验证 
其 中 的 值 。 随 便 一 个 半 吊 子 Web 开 发 人 员 都 能 搞定 ， 不 是 吗 ? 问题 在 于 ， 这 个 表单 中 元 素 的 内 容 
和 数目 都 是 完全 未 知 的 , 而 且 会 因 用 户 而 异 。 图 9-2 显 示 了 一 个 典型 的 例子 。 那 种 紧密 耦合 到 Name 
和 Address 这 类 特定 表单 域 的 validate 函 数 不 会 管用 , 因为 在 开发 期 间 无 法 得 知 要 验证 哪些 域 。 这 
正 是 组 合 模式 可 以 大 显 身 手 的 地 方 。 





图 9-2 不 同 用 户 可 能 会 看 到 不 同 的 表单 


首先 ， 我 们 应 该 逐一 鉴别 表单 的 各 个 组 成 元 素 ， 判 断 它 属 于 组 合 对 象 还 是 叶 对 象 〈 参 见 图 
9-3)。 表 单 最 基本 的 构成 要 素 是 用 户 用 以 输入 数据 的 域 ， 它 们 由 input、select 和 textarea 标 签 生 
成 。 用 于 组 织 相关 域 的 fieldset 标 签 属于 上 面 的 一 个 层次 。 位 于 最 顶层 的 是 表单 自身 。 


First name: 一 二 叶 对 象 (input) 
| Ee 


How did you hear about us? (Fiend “各 | 省 叶 对 象 (select) 组 合 对 象 (form) 
Comment 


127 图 9-3， 把 表单 的 基本 元 素 分 为 组 合 对 象 和 叶 对 象 


人 

注解 ”组 合 对 象 与 其 子 对 象 之 间 应 该 具有 一 种 具 一 (HAS-A ) 关系 ， 而 不 是 一 种 为 一 (IS-A ) 
关系 。 表单 包含 着 域 集 ( fieldset )， 而 后 者 又 包含 着 域 。 域 并 不 是 域 集 的 子 类 。 由 于 组 合 
对 象 与 其 所 有 子 对 象 都 具有 相同 的 接口 ， 这 可 能 会 诱 使 人 们 把 它们 看 成 是 超 类 和 子 类 的 
关系 ， 但 事实 并 非 如 此 。 叶 对 象 并 没有 继承 其 上 一 级 组 合 对 象 。 
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下 
我 们 的 第 一 个 任务 是 创建 一 个 动态 表单 并 实现 save 和 validate 操 作 。 表 单 中 实际 拥有 的 域 会 
因 用 户 而 异 ， 所 以 单单 save 或 validate 函 数 是 不 可 能 满足 每 一 个 人 的 需要 的 。 我 们 希望 设计 一 个 
模块 化 的 表单 ， 以 便 将 来 任何 时 候 都 能 为 其 添加 各 种 元 素 ， 而 不 用 修改 save 和 validate 函 数 。 
我 们 不 想 为 表单 元 素 的 每 一 种 可 能 组 合 编写 一 套 方法 , 而 是 决定 让 这 两 个 方法 与 表单 域 自身 
关联 起 来 。 也 就 是 说 ， 让 每 个 域 都 知道 如 何 保存 和 验证 自己 ; 


nameFieldset.validate(); 
nameFieldset.save(); 


这 里 的 难点 在 于 如 何 同时 在 所 有 域 上 执行 这 些 操作 。 我 们 不 想 使 用 迭代 结构 的 代码 一 一 访问 
那些 数目 未 知 的 域 ， 而 是 打算 用 组 合 模式 来 简化 代码 。 要 保存 所 有 域 ， 只 需 这 样 一 次 调用 即 可 : 

topForm.save(); | 

topForm 对 象 将 在 其 所 有 子 对 象 上 递归 调用 save 方 法 。 实 际 的 save 操 作 只 会 发 生 在 底层 的 叶 对 
象 上 。 组 合 对 象 只 起 到 一 个 传递 调用 的 作用 。 现 在 你 已 经 大 体 了 解 了 组 合 对 象 的 组 织 方式 ， 下 面 
该 看 看 其 实现 代码 了 。 

首先 要 做 的 是 创建 那些 组 合 对 象 和 叶 对 象 需要 实现 的 两 个 接口 : 


var Composite = new Interface('Composite', ['add', ‘remove’, "getChild']); 
var FormItem = new Interface('FormItem', ['save']); 


目前 FormItem 接 口 只 要 求实 现 一 个 save 函 数 , 但 稍 后 我 们 还 会 对 其 进行 扩充 。 图 9-4 显 示 了 待 


实现 的 类 的 UML 类 图 。 
ere” | 所 有 类 都 实现 了 
这 两 个 接口 








图 9-4 ”需要 实现 的 类 
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有 


CompositeForm 类 的 代码 如 下 : 


var CompositeForm = function(id, method, action) { // implements Composite, FormItem 
this.formComponents = []; 


this.element = document.createElement('form'); 
this.element.id = id; 

this.element.method = method || 'POST'; 
this.element.action = action || '#'; 


}; 


CompositeForm.prototype.add = function(child) { 
Interface.ensureImplements(child, Composite, FormItem); 
this. formComponents .push( child); 
this.element.appendChild(child.getElement()); 
}; 
CompositeForm.prototype.remove = function(child) { 
for(var i = 0, len = this.formComponents.length; i < len; i++) { 
if(this.formComponents[i] === child) { 
this. formComponents.splice(i, 1); // Remove one element from the array at 
// position i. 
break; 
} 
} 
j} 


CompositeForm.prototype.getChild = function(i) { 
return this.formComponents[i]; 


J; 


CompositeForm.prototype.save = function() { 
for(var i = 0, len = this. formComponents. length; i < len; i++) { 
this. formComponents[i].save(); 
} 
}; 


CompositeForm.prototype.getElement = function() { 

return this.element; 
}; 
| 这 里 有 些 东西 需要 说 明 一 下 。 首 先 ，CompositeForm 的 子 对 象 保存 在 一 个 数组 当中 ， 但 要 改 

用 别 的 数据 结构 也 很 容易 。 这 是 因为 实际 的 实现 细节 并 不 为 客户 所 知 。 使 用 Interface. 
ensureImplements 是 为 了 保证 要 添加 到 组 合 对 象 中 的 对 象 实现 了 正确 的 接口 。 这 对 组 合 对 象 的 正 
常 运转 很 重要 。 

这 里 实现 的 save 方 法 显示 了 组 合 对 象 上 的 操作 的 工作 方式 : 遍 访 各 个 子 对 象 并 对 它们 调用 同 

样 的 方法 。 现 在 看 看 叶 对 象 类 : 


var Field = function(id) { // implements Composite, FormItem 
this.id = id; 
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this.element; 


}; 


Field.prototype.add = function() {}; 
Field.prototype.remove = function() {}; 
Field.prototype.getChild = function() {}; 


Field.prototype.save = function() { 
setCookie(this.id, this.getValue()); 

}; 

Field.prototype.getElement = function() { 
return this.element; 


}; 


Field.prototype.getValue = function() { 
throw new Error('Unsupported operation on the class Field.'); 


j; 
这 个 类 将 被 各 个 叶 对 象 类 继承 。 它 将 Composite 接 口中 的 方法 实现 为 空 函数 ， 这 是 因为 叶 节 
点 不 会 有 子 对 象 。 你 也 可 以 考虑 让 这 几 个 函数 抛 出 异常 。 





警告 这 里 用 最 简单 的 方式 实现 了 Save 方法。 实际 上 把 用 户 的 原始 数据 存放 在 Cookie 中 是 一 个 
非常 糟糕 的 做 法 。 其 原因 有 多 个 。 首 先 ， 用 户 计算 机 上 的 Cookie 很 容易 被 自 改 ， 所 以 数 
据 的 有 效 性 无 法 得 到 保证 。 其次， 存储 在 Cookie 中 的 数据 有 大 小 限制 ， 因 此 用 户 的 数据 
可 能 不 会 被 全 部 保存 下 来 。 BA, 这 样 做 也 会 影响 到 性 能 , 这 是 因为 在 每 次 请 求 中 Cookie 
都 会 作为 HTTP 头 被 一 起 发 送 。 





save 方 法 用 getValue 方 法 获得 所 要 保存 的 对 象 值 ， 后 一 方法 在 各 个 子 类 中 的 实现 各 不 相同 。 
使 用 Save 方 法， 不 用 提交 表单 也 能 保存 表单 的 内 容 。 对 于 那 种 长 长 的 表单 来 说 这 尤其 有 用 ， 因 为 
用 户 可 以 把 数据 保存 下 来 ， 等 以 后 再 回来 完成 表单 的 填写 ; 


var InputField = function(id, label) { // implements Composite, FormItem 
Field.call(this, id); 


this.input = document.createElement(' input"); 
this.input.id = id; 


this.label = document.createElement('label'); 
var labelTextNode = document.createTextNode(label); 
this. label. appendChild(labelTextNode) ; 


this.element = document .createE lement('div'); 
this.element.className = ‘input-field'; 
this.element.appendChild(this. label); 
this.element.appendChild(this. input); 
}; 
extend(InputField, Field); // Inherit from Field. 
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InputField.prototype.getValue = function() { 
return this.input.value; 
}; 
InputFie1d 是 Fie1d 的 子 类 之 一 。 它 的 大 多 数 方法 都 是 从 Fie1d 继 承 而 来 ， 但 它 也 实现 了 针对 
input 标 签 的 getValue 方 法 的 代码 。TextareaFie1d 和 SelectField 也 实现 了 自 己 特有 的 getValue 方 
法 : 


var TextareaField = function(id, label) { // implements Composite, FormItem 
Field.call(this, id); 


this.textarea = document .createElement('textarea'); 
this.textarea.id = id; 


this. label = document.createElement('label'); 
var labelTextNode = document . createTextNode(label); 
this. label. appendChild(labelTextNode) ; 


this.element = document .createElement('div'); 
this.element.className = 'input-field'; 
this.element.appendChild(this.label); 
this.element.appendChild(this.textarea); 

}; 

extend(TextareaField, Field); // Inherit from Field. 


TextareaField.prototype.getValue = function() { 
return this.textarea.value; 


hs 


var SelectField = function(id, label) { // implements Composite, FormItem 
Field.call(this, id); 


this.select = document .createElement('select'); 
this.select.id = id; 


this.label = document .createElement('label'); 
var labelTextNode = document .createTextNode(label); 
this. label. appendChild(labelTextNode) ; 


this.element = document.createElement('div'); 
this.element.className = 'input-field'; 
this.element .appendChild(this. label); 
this.element.appendChild(this.select); 

j; 

extend(SelectField, Field); // Inherit from Field. 


SelectField.prototype.getValue = function() { 


return this.select.options[this.select.selectedIndex].value; 


}; 
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9.3.1 汇合 起 来 


这 是 组 合 模式 大 放 光 彩 的 地 方 。 无 论 有 多 少 表单 域 ， 对 整个 组 合 对 象 执 行 操作 只 需 一 个 函数 
调用 即 可 : 

var contactForm = new CompositeForm('contact-form', 'POST', 'contact.php'); 

contactForm.add(new InputField('first-name', ‘First Name')); 

contactForm.add(new InputField('last-name', 'Last Name')); 

contactForm.add(new InputField('address', ‘Address')); 

contactForm,add(new InputField('city', ‘City')); 

contactForm.add(new SelectField(‘state', ‘State’, stateArray)); 

// var stateArray =[{'al', ‘Alabama'}, ...]; 


contactForm.add(new InputField('zip', 'Zip')); 
contactForm.add(new TextareaField(‘comments', ‘Comments')); 


addEvent(window, ‘unload’, contactForm, save); 
可 以 把 Save 的 调用 绑 定 到 某 个 事件 上 , 也 可 以 用 setInterval 周 期 性 地 调用 这 个 函数 。 为 这 个 


组 合 对 象 添加 其 他 操作 也 很 简单 。 如 下 一 节 所 示 ， 验 证 数据 、 恢 复 先前 保存 的 数据 以 及 将 表单 重 
设 为 默认 状态 这 些 操 作 都 可 以 如 法 炮制 。 


9.3.2 向 FormItenm 添加 操作 
现在 基本 框架 已 经 设计 好 了 , 要 为 FormItem 接 口 添加 其 他 操作 很 容易 。 首 先是 修改 这 个 接口 ; 


var FormItem = new Interface(‘FormItem’, ['save', 'restore']); 
然后 是 在 叶 对 象 类 上 实现 这 些 操作 。 在 本 例 中 只 要 为 超 类 Fie1d 添 加 这 些 操作 以 供 那 些 子 类 
继承 即 可 : WE: 


Field.prototype.restore = function() { 
this.element.value = getCookie(this.id); 


2 


最 后 ， 为 组 合 对 象 类 添加 同样 的 操作 : 


CompositeForm.prototype.restore = function() { 
for(var i = 0, len = this.formComponents.length; i < len; i++) { 
this. formComponents[i].restore(); 


}; 
在 实现 中 加 入 下 面 这 行 代码 后 就 可 以 在 窗口 加 载 时 恢复 所 有 表单 域 的 值 : 


addEvent(window, 'load', contactForm.restore); 


93.3 向 层次 体系 中 添加 类 


到 目前 为 止 只 有 一 个 组 合 对 象 类 。 如 果 设 计 目标 要 求 对 操作 的 调用 有 更 多 粒度 上 的 控制 , BB 
么 ， 可 以 添加 更 多 层次 的 组 合 对 象 类 ， 而 不 必 改 变 其 他 类 。 假 设 我 们 想 要 对 表单 的 某 些 部 分 执行 [03 
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Save 和 restore 操 作 ， 而 不 影响 到 其 他 部 分 ， 有 一 个 解决 办 法 是 逐一 在 各 个 域 上 执行 这 些 操作 ; 


firstName.restore(); 
lastName.restore(); 


但 在 不 知道 表单 具体 会 有 哪些 域 的 情况 下 ,这 种 方法 并 不 管用 。 在 层次 体系 中 创建 新 的 层次 
是 一 个 更 好 的 选择 。 我 们 可 以 把 域 组 织 在 域 集 (fieldset) H, 每 一 个 域 集 都 是 一 个 实现 了 FormItem 
接口 的 组 合 对 象 。 在 域 集 上 调用 restore 将 导致 在 其 所 有 子 对 象 上 调用 restore。 

创建 CompositeFieldset 类 并 不 要 求 为 此 修改 其 他 类 。 因为 composite 接 口 隐藏 了 所 有 内 部 实 
现 细节 ， 我 们 可 以 自由 选用 某 种 数据 结构 来 存储 子 对 象 。 作 为 示范 ， 我 们 在 此 将 使 用 一 个 对 象 来 
存储 CompositeFieldset 的 子 对 象 ， 而 不 是 像 CompositeForm 那 样 使 用 数组 : 


var CompositeFieldset = function(id, legendText) { // implements Composite, FormItem 
this.components = {}; 


this.element = document .createElement('fieldset'); 
this.element.id = id; 


if(legendText) { // Create a legend if the optional second 
// argument is set. 
this. legend = document .createElement('legend' ); 
this. legend. appendChild(document .createTextNode(legendText); 
this.element.appendChild(this. legend); 
} 
}5 


CompositeFieldset.prototype.add = function(child) { 
Interface.ensureImplements(child, Composite, FormItem) ; 
this.components[child.getElement().id] = child; 
this.element.appendChild(child.getElement()); 

}; 


CompositeFieldset.prototype.remove = function(child) { 
delete this.components[child.getElement().id]; 
} 


CompositeFieldset.prototype.getChild = function(id) { 
if(this.components[id] != undefined) { 
return this.components[id]; 
} 
else { 
return null; 


j; 
CompositeFieldset.prototype.save = function() { 
for(var id in this.components) { 


if(!this.components .hasOwnProperty(id)) continue; 
this.components[id].save(); 


www.TopSage.com 


9.3 示例 : 表单 验证 123 


} 
}; 


CompositeFieldset.prototype.restore = function() { 
for(var id in this.components) { 
if(!this.components.hasOwnProperty(id)) continue; 
this. components[id].restore(); 


} 
}; 


CompositeFieldset.prototype.getElement = function() { 
return this.element; 
}; 
CompositeFieldset 的 内 部 细节 与 CompositeForm 截 然 不 同 ,但 是 因为 它 与 其 他 类 实现 了 同样 的 
接口 ， 所 以 也 能 用 在 组 合 当 中 。 只 要 对 实现 代码 做 少量 修改 即 可 获得 这 个 新 功能 : 


var contactForm = new CompositeForm('contact-form', 'POST', ‘contact.php'); 


var nameFieldset = new CompositeFieldset('name-fieldset'); 
nameFieldset.add(new InputField('first-name', ‘First Name')); 
nameFieldset.add(new InputField(‘last-name', ‘Last Name')); 
contactForm.add(nameFieldset) ; 


var addressFieldset = new CompositeFieldset('address-fieldset'); 
addressFieldset.add(new InputField(‘address', ‘Address')); 
addressFieldset.add(new InputField('city', ‘City')); 
addressFieldset.add(new SelectField('state', ‘State’, stateArray)); 
addressFieldset.add(new InputField('zip', 'Zip')); 
contactForm.add(addressFieldset); 


contactForm.add(new TextareaField('comments', ‘Comments')); 
body. appendChild(contactForm. getElement ()); 


addEvent(window, ‘unload’, contactForm.save); 
addEvent(window, ‘load’, contactForm. restore); 


addEvent('save-button', ‘click’, nameFieldset.save); 
addEvent('restore-button', 'click', nameFieldset.restore); 


现在 我 们 用 域 集 对 一 部 分 域 进行 了 组 织 。 也 可 以 直接 把 域 加 入 表单 之 中 (那个 评语 文本 框 就 
是 一 例 )， 这 是 因为 表单 不 在 乎 其 子 对 象 究竟 是 组 合 对 象 还 是 叶 对 象 ， 只 要 它们 实现 了 恰当 的 接 
口 就 行 。 在 contactForm 上 执行 任何 操作 仍然 会 导致 在 其 所 有 子 对 象 上 继而 又 在 这 些 子 对 象 的 
THRE) 执行 同样 的 操作 ， 因 此 系统 并 没有 损失 什么 功能 。 这 样 做 的 收获 是 在 表单 的 一 个 子 集 
上 执行 这 些 操 作 的 能 力 。 


9.3.4 添加 更 多 操作 
前 面 已 经 开 了 一 个 好 头 。 用 同样 的 方法 还 可 以 添加 更 多 操作 。 可 以 为 Field 的 构造 函数 增加 
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一 个 参数 , 用 以 表明 该 域 是 否 必须 填写 ， 然后 基于 这 个 属性 实现 一 个 验证 方法 。 可 以 修改 restore 
方法 , 以 便 在 域 没 有 保存 过 数据 的 情况 下 将 其 值 设 置 为 默认 值 。 甚至 还 可 以 添加 一 个 submit 方 法 ， 
用 Ajax 请 求 把 所 有 的 值 发 送 到 服务 器 端 。 由 于 使 用 了 组 合 模式 ， 添加 这 些 操作 并 不 需要 知道 表单 
具体 是 什么 样子 。 


94 示例 : 图 片 库 


在 表单 的 例子 中 ， 由 于 HTML 的 限制 ， 组 合 模式 并 没有 得 到 充分 利用 。 例 如 ， 你 不 能 在 表单 
中 嵌 套 表单 ， 而 只 能 幅 套 域 集 。 真正 的 组 合 对 象 是 可 以 内 嵌 在 同类 对 象 之 中 的 。 现在 我 们 研究 的 
是 使 用 组 合 模式 构建 用 户 界面 的 另 一 个 案例 ， 但 在 这 个 示例 中 ， 任何 位 置 都 可 以 换 用 任何 对 象 。 
同样 ， 本 例 中 也 要 用 JavaScript 对 象 来 包装 HTML 元 素 。 

这 次 的 任务 是 创建 一 个 图 片 库 。 我 们 希望 能 有 选择 地 隐藏 或 显示 图 片 库 的 特定 部 分 。 这 可 能 
是 单独 的 图 片 ， 也 可 能 是 图 片 库 。 其 他 操作 以 后 还 可 以 添加 ， 现在 我 们 只 关注 hide 和 show 操 作 。 
需要 的 类 只 有 两 个 : 用 作 图 片 库 的 组 合 对 象 类 和 用 于 图 片 本 身 的 叶 对 象 类 : 


var Composite = new Interface('Composite’, ['add', "remove', ‘getChild']); 
var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); 


// DynamicGallery class. 


var DynamicGallery = function(id) { // implements Composite, GalleryItem 
this.children = []; 


this.element = document .createElement('div'); 
this.element.id = id; 
this.element.className = 'dynamic-gallery'; 


} 
DynamicGallery.prototype = { 
// Implement the Composite interface. 


add: function(child) { 
Interface.ensureImplements(child, Composite, GalleryItem); 
this.children.push(child); 
this.element.appendChild(child.getElement()); 
}, 
remove: function(child) { 
for(var node, i = 0; node = this.getChild(i); i++) { 
if(node == child) { 
this. children.splice(i, 1); 
break; 


} 
this.element. removeChild(child.getElement()); 


2 
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getChild: function(i) { | 
return this.children[i]; 


// Implement the GalleryItem interface. 


hide: function() { 
for(var node, i = 0; node = this.getChild(i); i++) { 
node. hide(); 


this.element.style.display = ‘none’; 


}, 
show: function() { 
this.element.style.display = ‘block’; 
for(var node, i = 0; node = this.getChild(i); i++) { 
node. show() ; 


}, 
// Helper methods. 


getElement: function() { 
return this.element; 

Ri 

在 上 面 的 代码 中 , 首先 定义 的 是 组 合 对 象 类 和 叶 对 象 类 应 该 实现 的 接口 。 除 了 常规 的 组 合 对 
象 方法 外 ， 这 些 类 要 定义 的 操作 只 包括 hide 和 show。 接 下 来 定义 的 是 组 合 对 象 类 。 由 于 Dynamic- 
Gallery 只 是 对 div 元 素 的 包装 ， 所 以 图 片 库 中 可 以 再 嵌 套 图 片 库 ， 而 我 们 因此 也 就 只 需要 用 到 一 
个 组 合 对 象 类 。 

这 里 为 DynamicGallery 的 prototype 设 置 方法 的 做 法 与 前 例 略 有 不 同 。 我 们 没有 按 Dynamic- 
Gallery.prototype.methodName 的 形式 设置 方法 ， 而 是 把 一 个 对 象 字面 量 赋 给 prototype 属 性 ， 这 
个 对 象 包含 了 所 有 要 设置 的 方法 。 在 一 次 性 定义 多 个 方法 时 这 种 做 法 的 好 处 在 于 不 必 在 每 个 方法 
名 之 前 都 加 上 DynamicGallery.prototype。 以 后 添加 其 他 方法 时 ， 我 们 还 是 可 以 继续 使 用 原来 那 
种 更 哪 嗪 一 些 的 做 法 的 。 

你 也 许 很 想 用 DOM 自 身 作为 保存 子 元 素 的 数据 结构 。 它 已 经 拥有 addchi1d 和 removeChi1d 方 
法 ， 还 有 chi1dNodes 属 性 ， 对 于 存储 和 获取 组 合 对 象 的 子 对 象 来 说 这 原本 非常 理想 。 问 题 在 于 这 
种 做 法 要 求 每 个 相关 DOM 节 点 都 要 具有 一 个 反 指 其 包装 对 象 的 引用 ， 以 便 实现 所 要 求 的 操作 。 
而 在 某 些 浏览 器 中 这 会 导致 内 存 泄漏 。 一 般 说 来 ， 最 好 避免 让 DOM 对 象 反 过 来 引用 JavaScript 对 
象 。 出 于 这 种 考虑 ， 本 例 中 使 用 一 个 数组 来 保存 子 对 象 。 

叶 节 点 也 非常 简单 。 它 是 对 image 元 素 的 包装 ， 并 且 实 现 了 hide 和 show 方 法 ; 


// GalleryImage class. 


var GalleryImage = function(src) { // implements Composite, GalleryItem 
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this.element = document .createElement(‘img'); 
this.element.className = 'gallery-image'; 
this.element.src = src; 


} 
GalleryImage.prototype = { 
// Implement the Composite interface. 


add: function() {}, // This is a leaf node, so we don't 
remove: function() {}, // implement these methods, we just 
getChild: function() {}, // define them. 


// Implement the GalleryItem interface. 


hide: function() { 
this.element.style.display = ‘none’; 


}, 
show: function() { 
this.element.style.display = ''; // Restore the display attribute to its 
// previous setting. 


}, 
// Helper methods. 


getElement: function() { 
return this.element; 


} 

}; 

这 是 一 个 演示 组 合 模式 的 工作 方式 的 好 例子 。 每 个 类 都 很 简单 , 但 由 于 有 了 这 样 一 种 层次 体 
系 ,我 们 就 可 以 执行 一 些 复杂 操作 。GalleryImage 类 的 构造 函数 会 创建 一 个 image 元 素 。 这 个 类 定 
义 中 的 其 余部 分 由 空 的 组 合 对 象 方法 (因为 这 是 叶 节 点 ) 和 GalleryItem 要 求 的 操作 组 成 。 现 在 

我 们 可 以 使 用 这 两 个 类 来 管理 图 片 : 
var topGallery = new DynamicGallery('top-gallery'); 
topGallery.add(new GalleryImage('/img/image-1.jpg')); 


topGallery.add(new GalleryImage('/img/image-2.jpg')); 
topGallery.add(new GalleryImage('/img/image-3.jpg')); 


var vacationPhotos = new DynamicGallery('vacation-photos' ); 
for(var i = 0; i < 30; i++) { 
vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg')); 
} 
topGallery.add(vacationPhotos); 


topGallery.show(); // Show the main gallery, 
vacationPhotos.hide(); // but hide the vacation gallery. 
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在 组 织 图 片 时 ，DynamicGallery 这 个 组 合 对 象 类 你 想 用 多 少 次 都 行 。 因 为 由 DynamicGallery 
实例 化 的 组 合 对 象 可 以 嵌 套 在 同类 对 象 中 , 所 以 只 用 这 两 个 类 的 实例 就 能 建造 出 任意 大 的 层次 体 
系 。 你 也 可 以 对 这 个 层次 体系 中 的 任意 部 分 执行 各 种 操作 。 在 正确 建造 好 图 片 库 的 层次 体系 之 后 ， 
像 “ 显 示 在 海边 和 山区 的 度假 照片 ， 但 不 包括 2004 年 的 ”这 样 的 操作 ， 只 要 几 行 代码 即 可 实现 。 


9.5 组 合 模式 之 利 


使 用 组 合 模式 ， 简 单 的 操作 也 能 产生 复杂 的 结果 。 你 不 必 编 写 大 量 手工 遍历 数组 或 其 他 数据 
结构 的 粘 合 代码 ， 只 需 对 最 顶层 的 对 象 执行 操作 ， 让 每 一 个 子 对 象 自己 传递 这 个 操作 即 可 。 这 对 
于 那些 再 三 执行 的 操作 尤其 有 用 。 

在 组 合 模式 中 ， 各 个 对 象 之 间 的 耦合 非常 松散 。 只 要 它们 实现 了 同样 的 接口 ， 那 么 改变 它们 
的 位 置 或 互 换 它们 只 是 举 手 之 劳 。 这 促进 了 代码 的 重用 ， 也 有 利于 代码 重 构 。 

用 组 合 模式 组 织 起 来 的 对 象形 成 了 一 个 出 色 的 层次 体系 .每 当 对 顶层 组 合 对 象 执行 一 个 操作 
时 , 实际 上 是 在 对 整个 结构 进行 深度 优先 的 搜索 以 查找 节点 。 而 创建 组 合 对 象 的 程序 员 对 这 些 细 
节 一 无 所 知 。 在 这 个 层次 体系 中 添加 、 删 除 和 查找 节点 都 非常 容易 。 


96 ”组合 模式 之 头 


组 合 对 象 的 易 用 性 可 能 掩盖 了 它 所 支持 的 每 一 种 操作 的 代价 。 由 于 对 组 合 对 象 调用 的 任何 操 
作 都 会 被 传递 到 它 的 所 有 子 对 象 ， 如 果 这 个 层次 体系 很 大 的 话 ， 系 统 的 性 能 将 会 受到 影响 。 程 序 
员 可 能 一 时 还 不 会 察觉 到 : 像 topGallery.show() 这 样 一 个 方法 调用 会 引起 一 次 对 整个 树 结构 的 遍 
访 。 在 文档 中 说 明 一 下 这 个 情况 很 有 必要 。 

在 本 章 的 两 个 示例 中 ， 组 合 对 象 类 和 节点 类 都 被 用 作 HTML 元 素 的 包装 工具 ， 这 只 是 该 模式 
的 用 法 之 一 ， 但 也 是 一 种 常见 的 用 法 。 在 此 情况 下 ， 组 合 对 象 也 必须 遵守 HTML 的 使 用 规则 。 例 
如 ， 表 格 就 很 难 转化 为 一 个 组 合 对 象 ， 这 是 因为 表格 标签 中 只 能 包含 几 种 特定 的 标签 。 而 且 ， 此 
时 的 叶 节 点 并 不 是 那么 显而易见 。 表 格 单元 格 本 也 可 以 被 看 作 叶 节点 ， 但 它们 内 部 也 可 能 会 包含 
一 些 其 他 元 素 。 这 些 限 制 降低 了 组 合 对 象 的 有 用 性 ， 也 有 损 代码 的 模块 性 。 按 这 种 方式 使 用 组 合 
模式 时 ， 一 定 要 权衡 一 下 其 利弊 。 

组 合 模式 的 正常 运作 需要 用 到 某 种 形式 的 接口 。 接 口 检查 越 严格 ， 组 合 对 象 类 也 就 越 可 靠 。 
这 会 为 系统 增加 一 些 复杂 性 , 但 不 会 太 多 。 如 果 系 统 中 已 经 使 用 了 某 种 形式 的 接口 或 鸭 式 辨 型 ( 比 
如 Interface 类 )， 那 就 没 问 题 。 否 则 就 应 该 在 代码 中 加 入 类 型 检查 。 


9.7 ”小结 


如 果 应 用 得 当 ， 那 么 组 合 模式 是 一 种 非常 管用 的 模式 。 它 把 一 批 子 对 象 组 织 为 树 型 结构 ， 只 
要 一 条 命令 就 可 以 操作 树 中 的 所 有 对 象 。 它 提高 了 代码 的 模块 化 程度 ， 而 且 便 于 代码 重 构 和 对 象 
的 更 换 。 这 种 模式 特别 适合 于 动态 的 HTML 用 户 界面 ， 在 它 的 帮助 下 ， 你 可 以 在 不 知道 用 户 界面 
的 最 终 格局 的 情况 下 进行 开发 。 对 于 每 一 个 JavaScript 程 序 员 ， 它 都 是 最 有 用 的 模式 之 一 。 
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|] 面 模式 


i 面 模式 有 两 个 作用 : 一 是 简化 类 的 接口 ; 二 是 消除 类 与 使 用 它 的 客户 代码 之 间 的 耦合 。 

在 JavaScript 中 ， 门 面 模式 常常 是 开发 人 员 最 亲密 的 朋友 。 它 是 几乎 所 有 JavaScript 库 的 
核心 原则 。 通 过 创建 一 些 便利 方法 让 复杂 系统 变 得 更 加 简单 易 用 ， 门 面 模式 可 以 使 库 提 供 的 工具 
更 容易 理解 。 使 用 这 种 模式 ， 程 序 员 可 以 间接 地 与 一 个 子 系统 打交道 ， 与 直接 访问 子 系统 相 比 ， 
这 样 做 更 不 容易 出 错 。 

门面 模式 简化 了 诸如 错误 记录 或 跟踪 页 面 视图 统计 数据 这 类 常用 的 或 重复 性 的 任务 。 通 过 添 
加 一 些 便利 方法 〈 这 种 方法 是 对 原 有 的 一 些 方法 的 组 合 利 用 )， 它 还 可 以 让 对 象 的 功能 显得 更 加 
完善 。 

门面 模式 可 用 于 简化 复杂 接口 。 它 可 以 在 幕后 为 你 进行 错误 检查 、 清 除 不 再 需要 的 大 对 象 ， 
以 及 用 一 种 更 加 易 用 的 方式 展现 对 象 的 功能 。 

门面 模式 并 非 必 不 可 少 。 同 样 的 任务 不 用 它 也 能 完成 。 这 是 一 种 组 织 性 的 模式 ， 它 可 以 用 来 修 
改 类 和 对 象 的 接口 ， 使 其 更 便于 使 用 。 它 可 以 让 程序 员 过 得 更 轻松 使 他 们 的 代码 变 得 更 容易 管理 。 


10.1 一 些 你 可 能 已 经 知道 的 门面 元 素 


想 想 计算 机 桌面 上 的 那些 快捷 方式 图 标 , 它们 就 是 在 扮演 一 个 把 用 户 引导 至 某 个 地 方 的 接口 
的 角色 , 如 果 不 借 助 于 它们 的 话 , 那些 地 方 找 起 来 会 很 麻烦 。 对 于 那 种 嵌 得 比较 深 的 文件 或 目录 ， 
如 果 每 次 使 用 时 都 要 去 找 一 次 ， 实 在 是 一 件 令 人 厌烦 的 事 。 基 于 GUI 的 操作 系统 就 是 计算 机 上 的 
数据 和 功能 的 一 个 门面 。 每 次 点 击 、 拖 动 和 移动 某 个 东西 时 ， 实 际 上 是 在 跟 一 个 门面 打交道 ， 间 
接地 执行 一 些 莫 后 的 命令 。 

鉴于 你 可 能 已 经 有 过 一 些 JavaScript 使 用 经 验 并 且 在 网 上 找 过 适用 于 各 种 浏览 器 的 处 理事 件 
监听 器 的 方法 ， 也 许 见 过 这 样 的 代码 ; 

function addEvent(el, type, fn) { 


if (window.addEventListener) { 
el.addEventListener(type, fn, false); 


else if (window.attachEvent) { 
el.attachEvent('on' + type, fn); 
} 


else { 
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el['on' + type] = fn 


} 

开发 人 员 在 浏览 器 中 使 用 JavaScript 的 很 大 一 部 分 原因 就 在 于 事件 监听 器 。 因 为 JavaScript 是 
一 种 事件 驱动 的 语言 , 所 以 JavaScript 应 用 程序 中 要 是 连 一 个 事件 监听 器 都 没有 的 话 , 是 一 件 奇 怪 
的 事 。 不 过 这 种 事 的 确 可 能 存在 。 在 有 些 高 级 应 用 中 ，JavaScript 只 被 用 作 一 种 输出 文本 和 生成 
DOM 节 点 的 编程 环境 。 即 便 如 此 ， 这 种 语言 的 力量 在 很 大 程度 上 还 是 来 自 于 把 动作 和 事件 关联 
起 来 的 能 力 。 这 是 它 很 有 用 的 一 个 方面 。 

addEvent 函 数 是 一 个 基本 的 门面 ATE, 就 有 了 一 种 为 DOM 节 点 添加 事件 监听 器 的 简便 方 
法 。 你 不 用 再 为 每 次 为 一 个 元 素 添加 事件 监听 器 时 都 得 针对 浏览 器 间 的 差异 进行 检查 而 烦恼 。 有 
了 这 个 便利 方法 ， 你 大 可 把 与 添加 事件 监听 器 有 关 的 各 种 低层 细节 抛 在 脑 后 ， 而 把 心思 集中 在 如 


何 构建 自己 的 应 用 系统 上 。 
在 理想 状态 中 ， 只 需要 使 用 a 。 由 于 并 不 是 所 有 常见 浏览 器 实现 了 
这 个 函数 ， 所 以 我 们 必须 在 代码 中 1g pak ret, Ee 
seed EAE oes eH RIMES. ATE, RAV 
Op age 这 是 一 个 应 用 门面 模式 对 付 一 组 设 


中 那个 addEvent 函 数 会 根据 浏览 
AVE HAF 来 包装 它们 。 












把 检查 代码 封装 在 一 个 地 方 ，i 
计 得 比较 糟糕 的 API 的 案例 ， 其 


10.2 JavaScript 库 的 门面 


JavaScript 库 是 为 人 设计 的 。 设 计 它 们 的 目的 在 于 节省 时 间 、 简 化 常见 任务 和 提供 比 每 个 浏览 
器 都 实现 了 的 内 置 JavaScript 函 数 更 易于 使 用 的 接口 。 在 大 量 使 用 DOM 脚 本 编程 的 浏览 器 环境 中 ， 
的 确 需要 有 JavaScript 库 才能 对 付 。 如今 的 Web 应 用 程序 开发 要 求 你 必须 尽量 提高 编程 效率 。 要 做 
到 这 一 点 ， 最 简单 的 办 法 就 是 创建 自己 的 工具 函数 集 或 使 用 Prototype、jQuery 或 YUI 这 些 第 三 方 
JavaScript 库 。 


10.3 ”用 作 便 利 方法 的 门面 元 素 


门面 模式 给 予 开 发 人 员 的 另 一 个 好 处 表现 在 对 函数 的 组 合 上 。 这 些 组 合 而 得 的 函数 又 叫 便 利 
函数 (convenience function)。 下 面 是 一 个 纯粹 形式 化 的 例子 : 


function a(x) { 
// do stuff here... 


function b(y) { 
// do stuff here... 


function ab(x, y) { 
a(x); 
b(y); 

} 


你 可 能 会 想 为 什么 不 一 开头 就 把 所 有 功能 都 放 到 函数 ab 中 去 。 答 案 是 分 别提 供 a、b 和 ab 这 几 
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个 函数 可 以 获得 更 多 粒度 控制 和 灵活 性 。 组 合 a 和 b 可 能 会 对 应 用 程序 造成 破坏 或 者 产生 意 想不到 
的 结果 。 以 DOM 脚 本 编程 中 经 常用 到 的 两 个 普通 事件 方法 为 例 : 
口 event .stopPropagation() 
口 eyent .preventDefault() 
第 一 个 方法 stopPropagation 的 功能 是 中 止 事 件 沿 DOM 树 向 上 冒 泡 的 传播 过 程 ?。 第 二 个 方 
法 preventDefault 的 功能 是 阻止 浏览 器 针对 一 个 事件 的 默认 行为 。 它 可 以 用 来 防止 对 链接 的 点 
击 导致 浏览 器 导航 到 一 个 新 的 页 面 ， 也 可 以 用 来 阻止 表单 的 提交 。 因 为 不 同 的 浏览 器 厂商 为 这 
两 个 功能 提供 的 接口 略 有 差异 ， 所 以 现在 摆 在 我 们 面前 的 就 是 一 个 用 门面 模式 实现 便利 方法 的 
理想 案例 : 
var DED = window.DED || {}; 
DED.util = { 
StopPropagation: function(e) { 
if (ev.stopPropagation) { 
// W3 interface 
e.stopPropagation(); 


else { 
// IE's interface 
e.cancelBubble = true; 
} 
}, 
preventDefault: function(e) { 
if (e.preventDefault) { 
// W3 interface 
e.preventDefault(); 


else { 
// IE's interface 
e.returnValue = false; 
} 
}, 
/* our convenience method */ 
stopEvent: function(e) { 
DED.util.stopPropagation(e); 
DED.util.preventDefault(e); 


}; 

尽管 看 起 来 很 像 ， 但 门面 模式 并 不 是 适配器 模式 。 适配器 (第 11 章 将 会 详细 讲述 ) 是 
一 种 包装 器 ， 用 来 对 接口 进行 适 配 以 便 在 不 兼容 系统 中 使 用 它 。 而 创建 门面 元 素 则 是 图 个 
方便 。 它 并 不 用 于 达到 与 需要 特定 接口 的 客户 系统 打交道 这 个 目的 ， 而 是 用 于 提供 一 个 简 
化 的 接口 。 


© 严格 地 说 ， 它 不 仅 可 以 中 止 冒 泡 过 程 ， 也 能 中 止 捕获 过 程 ， 这 取决 于 事件 监听 器 是 用 在 事件 传播 的 哪个 阶段 。 


一 一 译 者 注 
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10.4 示例 : 设置 HTML 元 素 的 样式 


设置 HTML 元素 的 样式 是 DHTML 的 核心 内 容 ， 也 是 其 初衷 。 要 设置 HTML 元 素 的 样式 ， 只 
要 对 样式 对 象 的 特定 属性 赋值 即 可 。 通 常 ， 在 这 方面 浏览 器 的 差异 问题 基本 上 没有 多 大 影响 ， 也 
无 关 紧 要 。 例 如 ,如果 要 将 ID 为 content 的 div 元 素 的 文本 颜色 设置 为 红色 ， 可 以 使 用 下 面 的 代码 : 


var element = document. getElementById('content' ); 
element.style.color = ‘red’; 


如 果 想 把 font-size 属 性 值 设 置 为 16px， 可 以 这 么 做 ; 
element.style.fontSize = '16px'; 


现在 假设 要 一 次 设置 几 个 元 素 的 某 个 样式 。 这 是 一 个 合理 的 要 求 。 如 果 有 三 个 ID 分 别 为 foo、 
bar 和 baz 的 元 素 ， 并 且 想 把 它们 的 文本 颜色 都 设置 为 红色 ， 可 以 这 样 做 : 


var elementi = document .getElementById(' foo"); 
elementi.style.color = 'red'; 


var element2 = document .getElementById('bar'); 
element2.style.color = 'red'; 


var element3 = document .getElementById('baz'); 
element3.style.color = ‘red’; 


像 这 样 不 停 地 写 getElementById 并 且 为 每 一 个 元 素 设置 同样 的 属性 和 值 有 点 乏味 。 门 面 模式 
可 以 福 此 派 上 用 场 。 为 方便 起 见 ， 我 们 这 就 着 手 创建 一 个 接口 以 简化 成 批 设置 一 组 元 素 的 样式 
的 工作 。 既 然 你 已 经 了 解 了 各 种 关键 因素 ， 现 在 我 们 要 采用 一 种 逆向 的 工作 方式 ， 先 写 出 使 用 竺 
设计 的 便利 方法 的 代码 ， 然 后 再 编写 这 个 方法 本 身 : | 

setStyle(['foo', "bar'， ‘baz'], ‘color’, "red'); 

可 以 看 出 ， 要 创建 的 函数 名 为 setStyle， 这 里 传递 给 它 的 第 一 个 参数 是 一 个 包含 着 三 个 ID 值 
的 数组 。 第 二 个 参数 是 要 设置 的 样式 属性 ， 而 第 三 个 参数 则 是 该 属性 的 值 。 了 解 了 接口 后 ， 我 们 
现在 可 以 给 出 一 个 具体 的 实现 。 下 面 的 函数 就 是 一 个 门面 元 素 ， 它 可 以 满足 我 们 的 需要 ， 


function setStyle(elements，prop，val) { 
for (var i = 0, len = elements.length-1; i < len; ++i) { 
document . getElementById(elements[i]).style[prop] = val; 


} 3 
这 个 方法 已 经 很 有 用 , 但 要 是 我 们 还 可 以 一 次 设置 多 个 元 素 的 多 个 样式 就 更 好 了 ， 那样 的 话 就 
不 必 反 复 使 用 setStyle 方 法 。 例 如 ， 在 设置 元 素 的 position 时 ， 往往 也 希望 设置 它们 的 top 和 1eft 
样式 属性 。 更 有 甚 者 ， 有 些 样式 属性 彼此 密切 相关 ， 比 如 边 距 (margin) 和 衬 距 (padding), #3 
和 行 高 、 前 景色 和 背景 色 等 等 。 如 果 使 用 前 面 的 setStyle 方 法 ， 那么 代码 大 体会 是 下 面 这 个 样子 ; 


setStyle(['foo'], ‘position’, ‘absolute'); 
setStyle(['foo'], ‘top’, '50px'); 
setStyle(['foo'], ‘left', '300px'); 
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我 们 可 以 设计 一 个 更 复杂 一 些 的 接口 ， 把 所 有 逻辑 都 组 合 在 另 一 个 门面 元 素 中 ,以 便 用 一 次 
函数 调用 就 能 处 理 所 有 这 些 问 题 。 这 个 门面 元 素 内 部 也 要 使 用 setStyle， 但 客户 代码 对 此 一 无 所 


知 。 我 们 把 它 命名 为 setCSS; 


setCSS([‘foo'], { 
position: ‘absolute’, 


top: '50px', 
left: '300px' 
}); 


对 象 字面 量 的 名 / 值 对 表示 形式 看 起 来 甚至 更 接近 于 CSS 语 法 。setCSS 方 法 的 实现 如 下 : 
function setCSS(el, styles) { 
for ( var prop in styles ) { 
if (!styles.hasOwnProperty(prop)) continue; 
setStyle(el, prop, styles[prop]); 
} 
} 
现在 我 们 就 可 以 像 这 样 一 次 设置 多 个 元 素 的 多 种 样式 ， 


setCSS(['foo', “bar"，'baz']，{ 
color: ‘white’, 
background: ‘black’, 
fontSize: '16px', 
fontFamily: ‘georgia, times, serif’ 


td 


10.5 示例 ; 设计 一 个 事件 工具 


前 面 曾经 说 过 ， 在 处 理 跨 浏览 器 的 开发 问题 时 ， 最 好 创建 一 些 门面 函数 。 如 果 要 设计 一 个 大 
WE, 那么 最 好 把 其 中 所 有 的 工具 元 素 拢 在 一 起 ， 这 样 更 好 用 ,访问 起 来 也 更 简单 。 鉴 于 各 种 浏 
览 器 在 事件 处 理 方面 表现 出 来 的 大 量 差异 ， 开 发 一 个 事件 工具 很 有 必要 。 

我 们 先 从 一 个 基本 的 框架 开始 。 这 里 要 用 到 单 体 模式 。 它 位 于 DED.uti1 命 名 空间 中 ， 包 含 着 
我 们 要 设计 的 各 个 静态 方法 : 


DED.util.Event = { 
// bulk goes here... 


接 下 来 我 们 将 着 手 解决 开发 人 员 在 与 事件 打交道 时 都 会 碰 到 的 一 些 常见 问题 , 比如 怎样 获得 
事件 目标 元 素 和 事件 对 象 。 当 然 ， 我 们 也 会 利用 本 章 前 面 用 来 处 理事 件 传播 和 事件 默认 行为 的 代 
码 。 下 面 是 一 个 粗略 的 框架 ; 


DED.util.Event = { 
getEvent: function(e) { }, 
getTarget: function(e) { }, 
stopPropagation: function(e) { }, 
preventDefault: function(e) { }, 
stopEvent: function(e) { } 


3 
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下 面 的 代码 对 相关 对 象 的 能 力 和 特性 进行 检查 并 加 入 一 些 代码 分 支 , 以 图 弥合 浏览 器 之 间 的 
差异 。 其 结果 是 创建 了 5 个 门面 方法 ， 这 是 一 个 更 为 一 致 的 接口 ， 有 了 它 我 们 的 工作 会 变 得 更 轻 
松 : 

DED.util.Event = { 


getEvent: function(e) { 
return e || window.event; 


getTarget: function(e) { 
return e.target || e.srcElement; 
}, 
stopPropagation: function(e) { 
if (e.stopPropagation) { 
e.stopPropagation(); 
} 
else { 
e.cancelBubble = true; 
} 
b 
preventDefault: function(e) { 
if (e.preventDefault) { 
e.preventDefault(); 
} 
else { 
e.returnValue = false; 


}, 

stopEvent: function(e) { 
this.stopPropagation(e) ; 
this.preventDefault(e); 


}; 
现在 这 个 事件 工具 已 经 设计 好 了 ， 可 以 像 这 样 与 前 面 写 好 的 addEvent 函 数 结合 使 用 : 


addEvent($('example'), 'click', function(e) { 
// Who clicked me. 
console. log(DED.util.Event.getTarget(e)); 
// Stop propagating and prevent the default action. 
DED.util.Event.stopEvent(e); 
}); 


10.6 ”实现 门面 模式 的 一 般 步骤 


找 准 自己 的 应 用 程序 中 感觉 适合 使 用 门面 方法 的 地 方 后 ， 就 可 以 着 手 加 入 便利 方法 了 。 这 些 
函数 的 名 称 应 经 仔细 考虑 ， 与 它们 的 用 途 要 相称 。 对 于 那 种 由 几 个 函数 组 合 而 成 的 函数 ， 一 个 简 
单 的 办 法 就 是 把 相关 函数 的 名 称 串 连 成 一 个 函数 名 ， 并 采用 camel 大 写 规范 ， 或 者 也 可 以 使 用 
thisFunctionAndThatFunction 这 种 形式 。 
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处 理 浏览 器 API 的 不 一 致 性 属于 另 一 种 情况 ， 此 时 要 做 的 就 是 把 分 支 代码 放 在 新 创建 的 门面 
函数 中 ， 辅 以 对 象 检查 或 浏览 器 嗅 探 等 技术 。 为 这 种 函数 取 名 有 点 令 人 挠 头 ， 因为 你 面临 的 是 实 
现 类 似 功 能 的 函数 在 不 同 浏览 器 中 碰巧 有 着 不 同名 称 的 情况 。 这 种 浏览 器 称 为 pageX 的 ， 另 一 种 
浏览 器 称 为 clientX; 这 种 浏览 器 称 为 addEventListener 的 ， 另 一 种 浏览 器 称 为 attachEvent。 这 里 
所 能 给 出 的 最 好 建议 是 ， 取 一 个 好 认 的 名 字 ， 并 在 代码 文档 中 说 明 该 门面 函数 的 用 途 。 


10.7 ”门面 模式 的 适用 场合 


判断 是 否 应 该 应 用 门面 模式 的 关键 在 于 辨认 那些 反复 成 组 出 现 的 代码 。 如 果 函 数 b 出 现 
在 函数 a 之 后 这 种 情况 经 常 出 现 ， 那么 也 许 你 应 该 考虑 添加 一 个 把 这 两 个 函数 组 合 起 来 的 门 
EEE 

在 自己 的 核心 工具 代码 中 加 入 门面 函数 的 另 一 个 可 能 目 的 是 应 对 JavaScript 内 置 函数 在 不 同 
浏览 器 中 的 不 同 表 现 。 这 样 做 并 不 是 因为 不 能 直接 使 用 这 些 APL， 而 是 因为 在 处 理 跨 浏览 器 的 差 
异 问题 时 最 好 的 解决 办 法 就 是 把 这 些 差 异 抽取 到 门面 方法 中 。 它们 可 以 提供 一 个 更 一 致 的 接口 。 
addEvent 函 数 就 是 一 例 。 


10.8 门面 模式 之 利 


使 用 门面 模式 的 目的 就 是 要 让 程序 员 过 得 更 轻松 一 些 。 编写 一 次 组 合 代码 ,然后 就 可 以 反复 
使 用 它 ， 这 有 助 于 节省 时 间 和 精力 。 它 们 可 以 替 你 把 硬骨头 哨 掉 ， 并 且 提 供 了 一 个 处 理 常 见 问题 
和 任务 的 简化 接口 。 

门面 方法 方便 了 开发 人 员 , 并且 提 供 了 较 高 层 的 功能 ， 如 果 不 用 门面 模式 的 话 这 些 功 能 实现 
起 来 可 能 会 乏味 而 又 费力 。 它 们 还 能 降低 对 外 部 代码 的 依赖 程度 ， 这 为 应 用 系统 的 开发 增加 了 一 
些 额外 的 灵活 性 。 通 过 使 用 门面 模式 ， 可 以 避免 与 下 层 子 系统 紧密 耦合 。 这 样 就 可 以 对 这 个 系统 
进行 修改 而 不 会 影响 到 客户 代码 。 


10.9 “门面 模式 之 整 


有 时 候 门面 元 素 也 会 带 来 一 些 不 必要 的 额外 负担 。 方便 的 东西 不 一 定 就 得 用 。 门面 模式 常常 
会 被 滥用 。 在 使 用 你 心仪 的 门面 函数 之 前 请 三 思 。 搞 不 好 你 就 是 在 小 题 大 做 。 举 个 例 来 说 ， 你 不 
会 因为 电 冰 箱 很 方便 而 且 能 装 很 多 食品 就 带 它 去 野营， 你 也 不 会 去 租 一 台 拖拉 机 来 耕 自己 的 花 
园 。 在 实施 一 些 套 路 之 前 应 该 认真 搞 量 一 下 其 实用 性 ,因为 它们 不 易 觉 察 的 破坏 性 和 昂贵 代价 可 
能 会 使 应 用 程序 步履 踏 员 。 有 时 相 比 一 个 庞杂 的 门面 函数 , 其 组 成 函数 在 粒度 方面 更 有 吸引 力 。 
这 是 因为 门面 函数 可 能 常常 会 执行 一 些 你 并 不 需要 的 任务 。 

“对 于 简单 的 个 人 网 站 或 少量 营销 网 页 来 说 ， 仅 为 工具 提示 和 弹出 式 窗口 这 样 一 点 增强 行为 就 
导入 整个 JavaScript 库 可 能 并 不 明智 。 此 时 也 许可 以 考虑 只 使 用 少许 简单 的 门面 元 素 而 不 是 一 个 满 
是 这 类 东西 的 库 。 说 到 底 ， 这 得 由 你 自己 决定 ， 看 这 种 模式 是 否 可 行 。 
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门面 模式 可 用 来 创建 便利 函数 ， 这 些 函数 为 执行 各 种 复杂 任务 提供 了 一 个 简单 的 接口 。 它 们 
使 代码 更 容易 维护 和 理解 "。 它 们 还 能 弱化 子 系统 和 客户 代码 的 耦合 。 便 利 方法 有 助 于 简化 常见 
的 重复 性 任务 ， 以 及 把 经 常 相伴 出 现 的 常用 函数 组 合 在 一 起 。 这 个 模式 在 DOM 脚 本 编程 这 种 需 
要 面 对 各 种 不 一 致 的 浏览 器 接口 的 环境 中 很 常用 。 


© 原文 为 “They help keep your code maintainable, understandable, and abstraction-oriented.” EH ff) “abstraction- 
oriented ”一 词 非常 令 人 费解 ， 所 以 译文 中 没有 译 出 。 一 一 译 者 注 
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适配器 模式 


SE 配器 模式 可 用 来 在 现 有 接口 和 不 兼容 的 类 之 间 进 行 适 配 。 使 用 这 种 模式 的 对 象 又 叫 包 
JE 装 吕 (wrapper)， 因 为 它们 是 在 用 一 个 新 的 接口 包装 另 _… 个 对 象 ， 许 多 时 候 创建 适 本 
器 对 程序 员 和 接口 的 设计 人 员 都 有 好 处 。 在 设计 类 的 时 候 往往 会 遇 到 有 些 接口 不 能 与 现 有 API_- 
同 使 用 的 情况 。 借助 于 适配器 , 你 不 用 直接 修改 这 些 类 也 能 使 用 它们 。 本章 将 考察 一 些 这 类 场合 ， 
并 探讨 用 适配器 模式 连接 对 象 的 各 种 方式 。 


11.1 适配器 的 特点 


适配器 可 以 被 添加 到 现 有 代码 中 以 协调 两 个 不 同 的 接口 。 如 果 现 有 代码 的 接口 能 很 好 地 满足 
需要 ， 那 就 可 能 没有 必要 使 用 适配器 。 但 要 是 现 有 接口 对 于 手头 的 工作 来 说 不 够 直观 或 实用 ， 那 
么 可 以 使 用 适配器 来 提供 一 个 更 简洁 或 更 丰富 (option-rich) 的 接口 。 
从 表面 上 看 , 适配器 模式 很 像 门面 模式 。 它 们 都 要 对 别 的 对 象 进行 包装 并 改变 其 呈现 的 接口 。 
二 者 的 差别 在 于 它们 如 何 改变 接口 。 门 面 元 素 展现 的 是 一 个 简化 的 接口 , 它 并 不 提供 额外 的 选择 ， 
而 且 有 时 为 了 方便 完成 常见 任务 它 还 会 做 出 一 些 假定 。 而 适配器 则 要 把 一 个 接口 转换 为 另 一 个 接 
口 ， 它 并 不 会 滤 除 某 些 能 力 ， 也 不 会 简化 接口 。 如 果 客 户 系 统 期 待 的 API 不 可 用 ， 那 就 需要 用 到 
适配器 。 
适配器 可 被 实现 为 不 兼容 的 方法 调用 之 间 的 一 个 代码 薄 层 。 如 果 你 有 一 个 具有 3 个 字符 串 参 
数 的 函数 , 但 客户 系统 拥有 的 却 是 一 个 包含 三 个 字符 串 元 素 的 数组 ， 此 时 就 可 以 用 一 个 适配器 来 
衔接 二 者 。 
假设 你 有 一 个 对 象 ， 还 有 一 个 以 三 个 字符 串 为 参数 的 函数 : 
var clientObject = { 
string1: ‘foo’, 
string2: ‘bar’, 
string3: 'baz' 
fuckin interfaceMethod(stri, str2, str3) { 
} 


为 了 把 client0bject 作 为 参数 传递 给 interfaceMethod， 需 要 用 到 适配器 。 我 们 可 以 这 样 创建 
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function clientToInterfaceAdapter(o) { 
interfaceMethod(o.string1, o.string2, o.string3); 


} 

现在 就 可 以 把 整个 对 象 传递 给 这 个 函数 : 

clientToInterfaceAdapter(clientObject) ; 

clientToInterfaceAdaper 函 数 的 作用 就 在 于 对 interfaceMethod 函 数 进行 包装 , 并 把 传递 给 它 
的 参数 转换 为 后 者 需要 的 形式 。 


11.2 ERRAKI 


在 某 些 情况 下 ， 从 客户 一 方 对 代码 进行 修改 是 不 可 能 的 。 有 些 程序 员 因 此 索性 避免 创建 API。 
如 果 现 有 接口 发 生 了 改变 , 那么 客户 代码 也 必须 进行 相应 的 修改 后 才能 使 用 这 个 新 接口 ， 否 则 整 
个 应 用 系统 就 有 失灵 的 危险 。 在 引入 新 接口 之 后 ,一 般 说 来 最 好 向 客户 方 提供 一 些 可 为 其 实现 新 
接口 的 适配器 。 

以 PC 硬件 为 例 ，PS2 插 口 是 连 接 鼠 标 和 键盘 的 标准 接口 。 多 年 以 来 几乎 所 有 PC 都 带 有 这 种 接 
口 ， 和 鼠标 和 键盘 的 设计 人 员 ( 用 本 章 的 术语 来 讲 就 是 客户 ) 因此 就 有 了 一 个 固定 的 设计 目标 。 后 
来 硬件 工程 师 们 发 明了 可 以 完全 替代 PS2 接 口 的 技术 ， 他 们 改 用 USB 系 统 来 支持 键盘 、 鼠 标 和 其 
他 外 设 。 

但 现在 问题 来 了 。 对 于 设计 主板 的 工程 师 来 说 ， 消 费 者 有 没有 USB 键 盘 都 无 所 谓 。 他 们 决定 
不 再 支持 PS2 插 口 ， 以 便 降 低 成 本 (并 且 节 省 空间 )。 键 盘 和 鼠标 的 设计 人 员 这 下 意识 到 ， 要 想 卖 
掉 他 们 以 前 针对 PS2 接 口 生 产 的 成 千 上 万 套 键盘 和 鼠标 ， 需 要 有 适配器 的 支持 才 行 。 大 家 熟悉 的 
PS2-to-USB 适 配器 于 是 就 应 运 而 生 了 。 


11.3 FB): 适 配 两 个 库 


现在 可 供 选 择 的 JavaScript 库 非常 多 。 库 的 用 户 应 该 认真 分 析 一 下 , 看 看 哪 套 工 具 集 最 适合 自 
己 的 需要 ， 以 及 它们 对 自己 的 开发 会 带 来 什么 影响 。 此 外 ， 需 要 考虑 的 因素 还 包括 其 他 开发 人 员 
的 编程 风格 、 实 现 的 难 易 程度 以 及 是 否 存在 与 现 有 代码 的 冲突 和 不 兼容 问题 。 

即使 原来 已 经 选 好 了 库 ， 开 发 团队 以 后 仍 可 能 会 出 于 性 能 、 安 全 或 设计 的 考虑 ， 在 不 改动 已 
有 代码 的 前 提 下 更 换 所 用 的 库 。 有 时 公司 甚至 可 能 会 为 了 帮助 开发 新 手 而 提供 一 套 中 间 性 的 适 配 
器 ， 比 如 说 ， 为 了 帮助 他 们 从 自己 熟悉 的 另 一 套 API 过 渡 到 现在 使 用 的 API。 

在 最 简单 的 情况 下 , 创建 适配器 库 往往 是 一 个 比 改 写 所 有 代码 更 好 的 选择 。 下 面 的 例子 要 实 
现 的 是 从 Prototype 库 的 $ 函 数 到 YUI (Yahoo! User Interface) 的 get 方 法 的 转换 。 这 两 个 函数 的 功 
能 比较 相似 ， 不 过 请 先 看 看 它们 在 接口 方面 的 差别 : 


// Prototype $ function. 
function $() { 
var elements = new Array(); 
for(var i = 0; i < arguments.length; i++) { 
var element = arguments[i]; 
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if(typeof element == 'string') 

element = document.getElementById(element); 
if(arguments.length == 1) 

return element; 
elements .push(element) ; 


return elements; 


/* YUI get method. */ 
YAHOO.util.Dom.get = function(el) { 
if (YAHOO. lang.isString(el)) { 
return document .getElementById(el); 


} 
if (YAHOO. lang.isArray(el)) { 
var c = []J; 
for(var i = 0, len = el.length; i < len; ++i) { 
c[c. length] = YAHOO.util.Dom.get(el[{i]); 


return c; 


} 
if(el) { 
return el; 


return null; 

j; 

二 者 的 区 别 主要 在 于 : get 具 有 一 个 参数 ， 这 个 参数 可 以 是 一 个 HTML 元素、 字符 串 或 者 由 
字符 串 或 HTML 元 素 组 成 的 数组 ， 与 此 不 同 ，$ 函 数 没 有 正式 列 出 参数 ， 而 是 允许 客户 传 入 任意 
数目 的 参数 ， 不 管 是 字符 串 还 是 HTML 元 素 都 行 。 

如 果 你 需要 从 使 用 Prototype 的 $ 函 数 改 为 使 用 YUI 的 get 方 法 (或 者 相反 ), 那么 用 于 这 个 用 途 
的 适配器 会 是 什么 样子 呢 ? 其 实现 简单 得 令 人 吃惊 ; 


function PrototypeToYUIAdapter() { 
return YAHOO.util.Dom.get (arguments); 


function YUIToPrototypeAdapter(el) { 
return $.apply(window, el instanceof Array ? el :[el]); 


注意 观察 适配器 是 如 何 包装 被 适 配 方法 的 。 有 了 这 些 适 配器 , 现 有 的 客户 系统 就 可 以 继续 使 
用 其 熟悉 的 API。 如 果 Prototype 库 的 用 户 想 利用 YUI 的 方法 ， 那 么 只 要 通过 把 $ 函 数 插 接 到 适配器 
函数 来 适 配 自己 现 有 的 全 部 代码 即 可 。 用 不 着 为 此 修改 任何 原 有 的 方法 .对 于 从 Prototype 改 投 YUI 
的 人 来 说 ， 只 要 添加 下 面 这 行 代码 即 可 : 


$ = PrototypeToYUIAdapter; 
而 那些 从 YUI 改 投 Prototype 的 人 则 应 该 使 用 下 面 的 代码 : 
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YAHOO.util.Dom.get = YUIToPrototypeAdapter; 


11.4 示例 : 适 配 电 子 邮 件 API 


本 例 研究 的 是 一 个 Web 邮 件 API， 它 可 以 用 来 接收 、 发 送 邮件 并 执行 一 些 别 的 任务 。 我 们 
将 采用 类 Ajax 技术 从 服务 器 获取 消息 ， 然 后 将 消息 详情 载 入 DOM。 在 完成 这 个 应 用 程序 接口 
之 后 ， 我 们 将 讨论 如 何 为 其 编写 包装 函数 ， 以 便 那些 期 待 一 个 不 同 接口 的 客户 也 能 使 用 这 个 
API。 


要 事先 办 ， 先 看 一 下 整个 应 用 系统 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
“http: //www.w3.org/TR/html4/strict.dtd" 
> 
<html> 
<head> 
<title>Mail API Demonstration</title> 
<style type="text/css" media="screen"> 
body { 
font: 62.5% georgia, times, serif; 
} 
#doc { 
margin: 0 auto; 
width: 500px; 
font-size: 1.3em; 
} 
</style> 
<script src="lib-utils.js"></script> 
<script type="text/javascript"> 
// application utilities 
var DED = {}; 
DED.util = { 
substitute: function (s, o) { 
return s.replace(/{([*{}]*)}/g, 
function (a, b) { 
var r = o[b]; 
return typeof r === ‘string’ || typeof r === ‘number’ ? r : a; 


); 
}, 
asyncRequest: (function() { 
function handleReadyState(o, callback) { 
var poll = window.setInterval( 
function() { 
if(o && o.readyState == 4) { 
window. clearInterval(poll); 
if ( callback ){ 
callback(o); 
} 
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} 
}, 
50 
) ; 
} 
var getXHR = function() { 
var http; 
try { 
http = new XMLHttpRequest; 
getXHR = function() { 
return new XMLHttpRequest; 
}; 
} 
catch(e) { 
var msxml = [ 
"MSXML2.XMLHTTP.3.0', 
"MSXML2.XMLHTTP', 
"Microsoft. XMLHTTP' 
iF 
for (var i=0, len = msxml.length; i < len; ++i) { 
try { 
http = new ActiveXObject(msxml[i]); 
getXHR = function() { 
return new ActivexXObject(msxml[i]); 
}; 


break; 


} 
catch(e) {} 


return http; 

}; 

return function(method, uri, callback, postData) { 
var http = getXHR(); 
http.open(method, uri, true); 
handleReadyState(http, callback); 
http.send(postData || null); 
return http; 

}; 

HO 

} 


// dedMail application interface. 
var dedMail = (function() { 
function request(id, type, callback) { 
DED.util.asyncRequest( 
GET’, 
‘mail-api.php?ajax=true&id=' + id + '&type=' + type, 
function(o) { 
callback(o.responseText) ; 
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} 
); 
} 
return { 
getMail: function(id, callback) { 
request(id, 'all', callback); 
sendMail: function(body, recipient) { 
// Send mail with body text to the supplied recipient. 
}, 
save: function(id) { 
// Save a draft copy with the supplied email ID. 
b 
move: function(id, destination) { 
// Move the email to the supplied destination folder. 
}, 
archive: function(id) { 
// Archive the email. This can be a basic facade method that uses 
// the move method, hard-coding the destination. 
}, 
trash: function(id) { 
// This can also be a facade method which moves the message to 
// the trash folder. 
}s 
reportSpam: function(id) { 
// Move message to spam folder and add sender to the blacklist. 
}, 
formatMessage: function(e) { 
var e = e || window.event; 
try { 
e.preventDefault(); 
} 
catch(ex) { 
e.returnValue = false; 
} 
var targetEl = e.target || e.srcElement; 
var id = targetEl .id.toString().split('-')[1]; 
dedMail.getMail(id, function(msgObject) { 
var resp = eval('('+msgObject+')'); 
var details = ‘<p><strong>From:</strong> {from}<br>'; 
details += '<strong>Sent:</strong> {date}</p>'; 
details += '<p><strong>Message:</strong><br>'; 
details += '{message}</p>'; 
$('message-pane').innerHTML = DED.util.substitute(details, resp); 
} 
}; 
03 


// Set up mail implementation. 
addEvent(window, ‘load’, function() { 
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var threads = getElementsByClass('thread', 'a'); 
for (var i=0, len=threads.length; i<len; ++i) { 
addEvent(threads[i], ‘click’, dedMail.formatMessage) ; 
} 
H); 


</script> 
</head> 


<body> 
<div id="doc"> 
<h1>Email Application Interface</h1> 
<ul> 
<li> 
<a class="thread" href="#" id="msg-1"> 
load message Sister Sonya 
</a> 
</li> 
<li> 
<a class="thread" href="#" id="msg-2"> 
load message Lindsey Simon 
</a> 
</li> 
<li> 
<a class="thread" href="#" id="msg-3"> 
load message Margaret Stoooart 
</a> 
</li> 
</ul> 
<div id="message-pane"></div> 
</div> 
</body> 
</html> 


在 深入 代码 的 细节 之 前 先 看 看 图 11-1， 它 是 点 击 了 其 中 一 个 消息 条 目 后 的 最 终 输出 结果 的 屏 
幕 截图 。 这 可 以 给 你 一 个 有 关 你 即将 分 析 研 究 的 系统 的 初步 印象 。 


@ee Mail API Demonstration i ~ oi oo aO) 
Email Application Interface l 


© load message Sister Sonya 

. load message Lindsey Simon 

© load message Margaret Stoooart 
From: Lindsey Simon 
Sent: 2007-05-17 


Message: 
Hey Bro, I'm here at the Pong tournament! You should come by and check it out yo! 
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eee ”下 AN 3 


你 首先 注意 到 的 可 能 是 这 个 网 页 中 导入 了 一 个 基本 工具 集 (lib-utilsjs)， 函 数 getE1ements- 
ByC1ass、$ 和 addEvent 都 是 在 这 个 工具 集中 定义 的 。 接 下 来 ， 我 们 在 DED .uti1 命 名 空间 中 添加 
了 一 些 应 用 程序 工具 ， 这 个 应 用 程序 的 开发 需要 用 到 它们 。DED.uti1.substitute 方 法 的 用 途 
是 用 第 二 个 参数 传 入 的 对 象 的 属性 值 替换 第 一 个 参数 传 入 的 字符 串 中 的 相关 部 分 。 下 面 是 一 
个 例子 : 

var substitutionObject = { 


name: "world", 
place: "Google" 


var text = ‘Hello {name}, welcome to {place}'; 

var replacedText = DED.util.substitute(text, substitutionObject); 
console. log(replacedText) ; 

// produces "Hello world, welcome to Google" 


下 一 个 工具 函数 asyncRequest 用 于 向 服务 端 发 出 Ajax 请 求 。 另 外 请 注意 ， 针对 浏览 器 的 差异 ， 
函数 中 创建 XMLHttpRequest 对 象 的 部 分 使 用 了 分 支 技术 。 在 第 一 次 调用 getXHR 函 数 以 获取 XHR 对 
象 之 后 ， 这 个 函数 被 重新 定义 。 这 样 一 来 ， 对 浏览 器 差异 的 检查 只 会 执行 一 次 ， 而 不 是 每 次 调用 
时 都 要 进行 。 由 于 减少 了 对 象 检查 的 次 数 ， 因此 这 种 技术 能 够 大 幅 提高 应 用 程序 的 运行 速度 。 

最 后 来 看 dedMai1 这 个 单 体 对 象 : 


var dedMail = (function() {... 


这 个 对 象 提供 了 getMail、sendMail1、move 和 archive 等 常见 的 邮件 处 理 方法 。 注意 这 个 例子 
中 只 实现 了 getMail1 方 法 的 逻辑 ， 这 个 方法 根据 所 提供 的 ID 从 服务 器 获取 邮件 。 消息 加 载 结 束 后 ， 
作为 参数 传 给 getMai 1 方法 的 回调 函数 ca11back 将 被 调用 ， 传 给 这 个 回调 函数 的 参数 是 服务 器 回应 
的 文本 内 容 。 其 实 你 也 可 以 用 发 布 /订阅 模式 来 监听 ready 事 件 ， 但 这 里 采用 的 是 进行 XHR 调 用 时 
很 常见 的 函数 式 风 格 。 这 只 是 接口 开发 人 员 的 个 人 偏好 问题 。 


11.4.1 用 适配器 包装 Web 邮件 API 


现在 这 个 应 用 程序 接口 已 经 创建 完毕 , 可 以 在 客户 代码 中 对 它们 进行 调用 。 事情 看 起 来 很 顺 
Al: 你 使 用 了 其 中 的 方法 ， 谨 慎 地 测试 了 回调 函数 ， 并 且 对 数据 对 象 进行 解析 ， 然后 将 其 载 入 
DOM. 不 过 请 等 一 下 。 实 验 工 程 (experimental engineering) 小 组 那 边 的 人 已 经 用 原来 的 fooMajl 
系统 写 好 了 他 们 的 代码 ， 不 过 ， 他 们 也 愿意 利用 dedMail 这 个 更 先进 的 新 接口 。 问题 在 于 ， 他 们 
的 方法 "要求 提供 的 是 HTML 片 段 。 其 构造 函数 8 也 只 接受 一 个 人 D 值 。 而 且 他 们 的 getMail 函 数 只 
有 回调 函数 这 一 个 参数 。 这 多 少 有 点 老 土 (dedMail1 小 组 的 工程 师 们 也 这 样 想 )， 不 过 那些 使 用 
fooMail 的 工程 师 无 疑 可 以 从 dedMai1 的 性 能 测试 中 受益 。 最 后 ， 他 们 希望 不 用 改写 全 部 代码 。 所 
以 ， 我 们 的 决定 是 : 要 有 适配器 。 


O 从 上 下 文 看 ， 是 指 fooMai1 中 用 作 getMai1 方 法 参数 的 那个 回调 函数 。 一 — 译 者 注 
© 作者 语 焉 不 详 。 估 计 应 该 是 指 fooMail 构 造 函数 。 一 一 译 者 注 
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11.4.2 M fooMail 转向 dedMail 


与 Prototype 和 YUI 的 适配器 那个 例子 一 样 ， 从 fooMail 转 向 dedMail1 相 对 而 言 应 该 很 简单 。 在 
充分 了 解 了 提供 方 (supplier) 和 接受 方 (receiver) 的 情况 后 ， 你 就 可 以 截取 来 自 提供 方 的 逻辑 ， 
然后 用 接受 方 能 够 理解 的 方式 对 其 进行 转换 。 

先 来 看 一 段 使 用 fooMail 这 个 API 的 代码 。 


fooMail.getMail(function(text) { 
$('message-pane’).innerHTML = text; 
H; 
注意 ，getMail 方 法 以 一 个 回调 方法 为 参数 ， 这 个 回调 函数 在 被 调用 时 得 到 的 参数 是 包含 着 
发 信人 姓名 、 发 信 日 期 和 信件 内 容 的 一 段 文 本 。 这 不 算 理想 ， 但 使 用 fooMai1 的 工程 师 们 不 想 冒 
破坏 现 有 应 用 系统 的 危险 对 此 进行 修改 。 你 可 以 像 下 面 这 样 为 他 们 写 一 个 简单 的 适配器 ,这样 他 
们 就 不 必 改 变 自己 的 原 有 代码 ”: 


var dedMailtoFooMailAdapter = {}; 
dedMailtoFooMailAdapter.getMail = function(id, callback) { 
dedMail.getMail(id, function(resp) { 
var resp = eval('('+resp+')'); 
var details = ‘<p><strong>From:</strong> {from}<br>' ; 
details += '<strong>Sent:</strong> {date}</p>'; 
details += '<p><strong>Message:</strong><br>' ; 
details += '{message}</p>'; 
callback(DED.util.substitute(details, resp)); 
}); 


// Other methods needed to adapt dedMail to the fooMail interface. 


// Assign the adapter to the fooMail variable. 
fooMail = dedMailtoFooMailAdapter; 


这 段 代码 中 用 dedMailtoFooMai1Adapter 这 个 单 体 对 象 改 写 了 fooMail 对 象 。 该 单 体 对 象 实现 
了 一 个 getMail 方 法 。 这 个 方法 内 部 在 调用 那个 回调 函数 时 会 把 一 段 HTML 文 本 作为 参数 正确 地 传 
给 它 。 
11.5 ”适配器 模式 的 适用 场合 

适配器 适用 于 客户 系统 期 待 的 接口 与 现 有 API 提 供 的 接口 不 兼容 这 种 场合 。 它 只 能 用 来 协调 


语法 上 的 差异 问题 。 适 配器 所 适 配 的 两 个 方法 执行 的 应 该 是 类 似 的 任务 ， 否 则 的 话 它 就 解决 不 了 


O 作者 的 这 段 代码 有 严重 的 错误 。 这 个 适配器 既然 是 用 来 让 客户 以 fooMail 系 统 的 接口 来 使 用 dedMai1 系 统 中 的 功能 
的 ， 那 么 其 getMai1 方 法 的 参数 列表 就 应 该 与 fooMai1 .getMail 的 参数 列表 一 致 ， 即 只 以 一 个 回调 函数 为 参数 。 然 
而 dedMailtoFooMai1Adapter .getMai1 的 参数 列表 却 与 dedMail .getMai1 一 样 ， 这 是 不 行 的 。 另 外 ， 这 个 适配器 应 
命名 为 fooMailtoDedMai1Adapter 才 对 。 实际 上 , 要 想 改正 这 个 错误 , 必须 对 fooMai1 这 个 对 象 有 进一步 了 解 才 行 。 
然而 作者 披露 的 相关 信息 太 少 ， 所 以 我 也 无 法 为 读者 提供 一 个 正确 的 适配器 版 本 。 一 一 译 者 注 
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问题 。 如 果 客 户 想 要 的 是 一 个 不 同 的 接口 ， 比 如 说 一 个 他 们 用 起 来 更 容易 一 些 的 接口 ， 那 么 也 可 
以 为 此 而 使 用 适配器 。 就 像 桥接 元 素 和 门面 元 素 一样 ， 通 过 创建 适配器 ， 可 以 把 抽象 与 其 实现 隔 
离开 来 ， 以 便 二 者 独立 变化 。 


11.6 ”适配器 模式 之 利 


本 章 通 篇 都 在 讲 : 适配器 有 助 于 避免 大 规模 改写 现 有 客户 代码 。 其 工作 机 制 是 : 用 一 个 新 的 
接口 对 现 有 类 的 接口 进行 包装 , 这 样 客户 程序 就 能 使 用 这 个 并 非 为 其 量 身 打造 的 类 而 又 毋 需 为 此 
大 动手 术 。 


11.7 EMRIN ZIE 


可 能 有 些 工程 师 不 想 使 用 适配器 , 其 原因 主要 在 于 他 们 实际 上 需要 彻底 重 写 代 码 。 有 人 认为 
适配器 是 一 种 不 必要 的 开销 , 完全 可 以 通过 重 写 现 有 代码 避免 。 此 外 适配器 模式 也 会 引入 一 批 需 
要 支持 的 新 工具 。 如 果 现 有 API 还 未 定形 , 或 者 新 接口 还 未 定形 (这 更 有 可 能 )， 那么 适配器 可 能 
不 会 一 直 管 用 。 在 设计 键盘 的 硬件 工程 师 创 造 PS2-to-USB 适 配器 这 个 案例 中 , 成 千 上 万 的 键盘 上 
面 的 PS2 插 头 不 会 再 有 什么 变化 ， 而 USB 接 口 则 成 了 新 的 标准 ， 所 以 这 种 适配器 才 有 意义 。 但 是 
在 软件 开发 这 一 行 中 ， 情 况 并 非 总 是 如 此 。 


11.8 小 结 


适配器 模式 是 一 种 很 有 用 的 技术 , 它 可 以 用 来 对 类 和 对 象 进 行 包 装 ， 以 便 向 客户 代码 提供 其 
期 待 的 接口 。 应 用 这 种 技术 ， 你 可 以 在 不 影响 现 有 实现 的 前 提 下 利用 新 的 更 好 的 接口 。 作 为 一 个 
实现 者 (implementer)， 你 可 以 根据 自己 的 需要 定制 接口 。 这 种 模式 的 确 会 引入 一 些 新 代码 ， 不 
过 ， 在 涉及 大 型 系统 和 遗留 框架 的 情况 下 ， 它 的 优点 往往 比 缺点 更 突出 。 
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章 讨论 的 是 一 种 为 对 象 增添 特性 的 技术 ， 它 并 不 使 用 创建 新 子 类 这 种 手段 。 装 饰 者 模 

式 (decorator pattern) 可 用 来 透明 地 把 对 象 包装 在 具有 同样 接口 的 男 一 对 象 之 中 。 这 
样 一 来 ， 你 可 以 给 一 个 方法 添加 一 些 行为 ， 然 后 将 方法 调用 传递 给 原始 对 象 。 相 对 于 创建 子 类 来 
说 , 使 用 装饰 者 对 象 是 一 种 更 灵活 的 选择 。 这 种 模式 特别 适合 JavaScript (在 本 章 后 面 讲 到 动态 接 
口 时 你 就 会 体会 到 这 一 点 )， 因 为 通常 JavaScript 代 码 并 不 怎么 依赖 对 象 的 类 型 。 


12.1 装饰 者 的 结构 


装饰 者 可 用 于 为 对 象 增加 功能 。 它 可 以 用 来 替代 大 量子 类 。 为 了 准确 说 明 这 个 概念 ， 我 们 将 
进一步 分 析 第 7 章 所 讲 的 那个 自行 车 商店 的 例子 。 你 上 次 见 到 AcmeBicycleShop 类 的 时 候 ， 顾 客 可 
以 购买 的 自行 车 有 4 种 型 号 。 后 来 这 家 商店 开始 为 每 一 种 自行 车 提供 一 些 额 外 的 特色 配件 。 现 在 
顾客 再 加 点 钱 就 可 以 买 到 带 前 灯 、 尾 灯 、 前 挂 货 篮 或 铃 销 的 自行 车 。 每 一 种 可 选 配件 都 会 影响 到 
售 价 和 车 的 组 装 方法 。 这 个 问题 最 基本 的 解决 办 法 是 为 选 件 的 每 一 种 组 合 创 建 一 个 子 类 : 


var AcmeComfortCruiser = function() { ... }; // The superclass for all of the 
// other comfort cruisers 

var AcmeComfortCruiserWithHeadlight = function() { ... }; 

var AcmeComfortCruiserwWithTaillight = function() { ... }; 

var AcmeComfortCruiserWithHeadlightAndTaillight = function() | vied 

var AcmeComfortCruiserwWithBasket = function() { ... }; 

var AcmeComfortCruiserWithHeadlightAndBasket = ol Et es 

var AcmeComfortCruiserWithTaillightAndBasket = function() { ... }; 

var AcmeComfortCruiserWithHeadlightTaillightAndBasket = function() { ... }; 

var AcmeComfortCruiserWithBell = function() { ... }; 


但 是 这 种 办 法 根本 行 不 通 ， 原 因 很 简单 : 这 需要 实现 100 多 个 类 ( 那 4 个 父 类 每 个 都 要 派生 24 
个 子 类 ， 再 加 上 父 类 本 身 )。 而 且 这 样 做 的 话 你 不 得 不 对 工厂 方法 进行 修改 ， 以 便 能 创建 分 别 属 
于 这 100 个 子 类 的 自行 车 来 卖 给 顾客 。 你 恐怕 不 想 让 自己 的 余生 都 花 在 维护 成 100 多 个 子 类 上 , 所 
以 ， 得 想 点 更 好 的 办 法 才 是 。 

装饰 者 模式 对 于 实现 这 些 选择 再 合适 不 过 了 。 你 不 用 为 自行 车 和 选 件 的 每 一 种 组 合 创建 一 个 
子 类 ， 而 只 需 创建 4 个 新 类 〈 一 个 类 针对 一 种 选 件 ) 即 可 。 这 些 类 与 那 4 种 自行 车 类 一 样 都 要 实现 
Bicycle 接 口 ， 但 它们 只 被 用 作 这 些 自行 车 类 的 包装 类 。 在 这 些 选 件 类 上 进行 的 方法 调用 将 被 转 
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到 它们 包装 的 自行 车 类 上 ， 有 时 会 稍 有 修改 。 

在 这 个 例子 中 ， 选 件 类 就 是 装饰 者 ， 而 自行 车 类 是 它们 的 组 件 (component)。 装 饰 者 对 其 组 
件 进 行 了 透明 包装 ， 二 者 可 以 互 换 使 用 ， 这 是 因为 它们 实现 了 同样 的 接口 。 下 面 我 们 来 看 应 该 怎 
样 实现 自行 车 装饰 者 类 。 首 先 要 改 一 下 接口 ， 加 入 一 个 getPrice 方 法 : 

/* The Bicycle interface. */ 


var Bicycle = new Interface('Bicycle’, ['assemble', ‘wash’, ‘ride’, ‘repair’, | 
'getPrice']); 


所 有 自行 车 类 和 选 件 装饰 者 都 要 实现 这 个 接口 。AcmeComfortCruiser 类 大 致 是 这 个 样子 (不 
需要 为 使 用 装饰 者 而 进行 什么 修改 ): 


/* The AcmeComfortCruiser class. */ 
var AcmeComfortCruiser = function() { // implements Bicycle 


j; 
AcmeComfortCruiser.prototype = { 
assemble: function() { 


wash: function() { 


ride: function() { 


}, 


repair: function() { 


}, 
getPrice: function() { 
return 399.00; 










} 

}; + : 

我 们 不 关心 除 get Sh Ef PAIERA. ASTRA HE AB 4 SE ESET Os BE 
明白 其 原因 。 这 些 选 件 :本 人 就 是 人 虑 在 径 们 身上 的 方法 调用 。 为 了 简化 这 个 任务 ， 
也 为 了 方便 以 后 增 深 7 选任， 我 们 将 符 抽 有 象 类 8icycleDecorator， 所 有 选 件 类 都 从 此 派 

口 所 要 


生 。 它 提供 了 Bicy 求 的 各 个 方法 的 默认 版 本 : 
/* The BicycleDec OP rs Eassov) 11) 
le 


var BicycleDecorator = function(bicycle) { // implements Bicycle 
Interface.ensureImplements(bicycle, Bicycle); 
this.bicycle = bicycle; 


BicycleDecorator.prototype = { 


assemble: function() { 
return this.bicycle.assemble(); 
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wash: function() { 
return this.bicycle.wash(); 


> 
ride: function() { 
return this.bicycle.ride(); 


repair: function() { 
return this.bicycle.repair(); 
i function() { 
return this.bicycle.getPrice(); 
n 
几乎 没有 比 这 更 简单 的 装饰 者 类 了 。 它 的 构造 函数 接受 一 个 对 象 参 数 ， 并 将 其 用 作 该 装饰 者 
的 组 件 。 该 类 实现 了 Bicycle 接 口 ， 它 所 实现 的 每 一 个 方法 所 做 的 只 是 在 其 组 件 上 调用 同名 方法 。 
乍 一 看 这 与 组 合 模 式 的 工作 方式 非常 相似 ， 不 过 我 们 会 在 12.1.2 节 中 解释 二 者 的 差别 。 
BicycleDecorator 类 是 所 有 选 件 类 的 超 类 。 对 于 那些 不 需要 修改 的 方法 ， 选 件 类 只 要 使 用 从 
BicycleDecorator 继 承 而 来 的 版 本 即 可 ， 而 这 些 方法 又 会 在 组 件 上 调用 同样 的 方法 ， 因 此 选 件 类 
对 于 任何 客户 代码 都 是 透明 的 。 
到 了 这 里 ， 装 饰 者 开始 变 得 有 趣 了 。 有 了 BicycleDecorator， 创 建 各 种 选 件 类 很 容易 ， 只 需 
要 调用 超 类 的 构造 函数 并 改写 某 些 方法 即 可 。 下 面 是 Head1ightDecorator 类 的 代码 : 


/* HeadlightDecorator class. */ 


var HeadlightDecorator = function(bicycle) { // implements Bicycle 
// Call the superclass's constructor. 
HeadlightDecorator .superclass.constructor.call(this, bicycle); 


} 
extend(HeadlightDecorator BicycleDecorator); // Extend the superclass. 
HeadlightDecorator.prototype.assemble = function() { 

return this.bicycle.assemble() + ' Attach headlight to handlebars.'; 


SAT Pa ee eRe ee = function() { 
return this.bicycle.getPrice() + 15.00; 

J; 

这 个 类 很 简单 。 它 重 定义 了 需要 进行 装饰 的 两 个 方法 。 本 例 中 装饰 这 些 方 法 的 做 法 是 ， 先 执 
行 组 件 的 方法 ， 然 后 在 此 基础 上 附加 一 些 装饰 元 素 。assemble 方 法 中 附加 的 是 一 条 指示 ， 而 
getPrice 方 法 则 是 把 前 灯 的 价格 计 入 总 价 当中 。 

现在 一 切 就 绪 ， 该 来 看 看 怎么 使 用 装饰 者 了 。 要 创建 一 辆 带 前 灯 的 自行 车 ， 首 先 应 该 创建 自 
行车 的 实例 , 然后 以 该 自行 车 对 象 为 参数 实例 化 前 灯 选 件 。 在 此 之 后 , 应 该 只 使 用 这 个 Head1ight- 
Decorator 对 象 ， 你 完全 可 以 将 其 视 为 一 辆 自行 车 ， 而 把 它 是 一 个 装饰 者 对 象 这 件 事 抛 在 脑 后 : 


var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. 
alert(myBicycle.getPrice()); // Returns 399.00 
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myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object. 
alert(myBicycle.getPrice()); // Now returns 414.00 


上 面 的 代码 中 第 3 行 最 为 关键 。 这 里 用 来 存放 那个 Head1ightDecorator 实 例 的 不 是 另 一 个 变 
量 ， 而 是 用 来 存放 自行 车 实例 的 同一 变量 。 这 意味 着 此 后 将 不 能 再 访问 原来 的 那个 自行 车 对 象 ， 
不 过 没关系 ， 你 以 后 不 再 需要 这 个 对 象 。 那 个 装饰 者 完全 可 以 和 自行 车 对 象 互 换 使 用 。 这 也 意味 
着 你 可 以 随心 所 和 欲 地 霸 套 使 用 多 种 装饰 者 。 假 如 你 创建 一 个 Tail1ightDecorator 类 ， 那 么 可 以 将 
其 与 Head1ightDecorator 结 合 使 用 : 

/# TaillightDecorator class. */ 


var TaillightDecorator = function(bicycle) { // implements Bicycle 
// Call the superclass's constructor. 
TaillightDecorator .superclass.constructor.call(this, bicycle); 


} 
extend(TaillightDecorator, BicycleDecorator); // Extend the superclass. 
TaillightDecorator.prototype.assemble = function() { 

return this.bicycle.assemble() + ' Attach taillight to the seat post.'; 


TaillightDecorator.prototype.getPrice = function() { 
return this.bicycle.getPrice() + 9.00; 
}; 


var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. 
alert(myBicycle.getPrice()); // Returns 399.00 


myBicycle = new TaillightDecorator(myBicycle); // Decorate the bicycle object 
// with a taillight. 
alert(myBicycle.getPrice()); // Now returns 408.00 


myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object 
// again, now with a headlight. 
alert(myBicycle.getPrice()); // Now returns 423.00 


你 可 以 如 法 炮制 ， 创 建 对 应 于 前 挂 货 篮 和 铃 销 的 装饰 者 。 通 过 在 运行 期 间 动态 应 用 装饰 者 ， 
可 以 创建 出 具有 所 有 需要 的 特性 的 对 象 ， 而 不 用 去 维护 那 100 个 不 同 的 子 类 。 要 是 前 灯 的 价格 发 
生变 化 ， 你 只 要 在 Head1ightDecorator 类 这 一 个 地 方 予以 更 新 即 可 。 维护 工作 因此 也 更 容易 管理 
得 多 。 
12.1.1 接口 在 装饰 者 模式 中 的 角色 


装饰 者 模式 颇 多 得 益 于 接口 的 使 用 。 装 饰 者 最 重要 的 特点 之 一 就 是 它 可 以 用 来 替代 其 组 件 。 
在 本 例 中 ， 这 就 是 说 任何 原来 使 用 AcmeComfortCruiser 实 例 的 地 方 ， 都 可 以 使 用 Head1ight- 
Decorator 实 例 ， 为 此 不 必 对 代码 进行 任何 修改 。 这 是 通过 确保 所 有 装饰 者 对 象 都 实现 了 Bicycle 
接口 而 达到 的 。 
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接口 在 此 发 挥 着 两 个 方面 的 作用 。 首 先 ， 它 说 明了 装饰 者 必须 实现 哪些 方法 ， 这 有 助 于 防止 
开发 过 程 中 的 错误 。 通 过 创建 一 个 具有 一 批 固定 方法 的 接口 ， 你 所 面 对 的 就 不 再 是 一 个 游 移 不 定 
的 目标 。 此 外 ， 它 还 可 以 在 新 版 工厂 方法 〈 参 见 12.3 节 ) 中 用 来 确保 所 创建 的 对 象 都 实现 了 必需 
的 方法 。 

如 果 装 饰 者 对 象 与 其 组 件 不 能 互 换 使 用 ， 它 就 形 失 了 其 功用 。 这 是 装饰 者 模式 的 关键 特点 ， 
要 注意 防止 装饰 者 和 组 件 出 现 接口 方面 的 差异 。 这 种 模式 的 好 处 之 一 就 是 可 以 透明 地 用 新 对 象 装 
饰 现 有 系统 中 的 对 象 ， 而 这 并 不 会 改变 代码 中 的 其 他 东西 。 只 有 装饰 者 和 组 件 实现 了 同样 的 接口 
才能 做 到 这 一 点 。 


12.1.2 ”装饰 者 模式 与 组 合 模式 的 比较 


从 BicycleDecorator 类 这 个 例子 可 以 看 到 ， 装 饰 者 模式 和 组 合 模 式 之 间 有 许多 共同 点 。 装 饰 
者 对 象 和 组 合 对 象 都 是 用 来 包装 别 的 对 象 (那些 对 象 在 组 合 模式 中 称 为 子 对 象 ， 而 在 装饰 者 模式 
中 称 为 组 件 )， 它 们 都 与 所 包装 的 对 象 实现 同样 的 接口 并 且 会 把 任何 方法 调用 传递 给 这 些 对 象 。 
像 BicycleDecorator 这 种 极其 基本 的 装饰 者 甚至 可 以 被 视 为 一 个 简单 的 组 合 对 象 。 那 么 这 二 者 之 
间 又 有 什么 区 别 呢 ? 

组 合 模式 是 一 种 结构 型 模式 , 用 于 把 众多 子 对 象 组 织 为 一 个 整体 。 藉 此 程序 员 与 大 批 对 象 打 
交道 时 可 以 将 它们 当 作 一 个 对 象 来 对 待 , 并 将 它们 组 织 为 层次 性 的 树 。 通 常 它 并 不 修改 方法 调用 ， 
而 只 是 将 其 沿 组 合 对 象 与 子 对 象 的 链 向 下 传递 ， 直 到 到 达 并 落实 在 叶 对 象 上 。 

装饰 者 模式 也 是 一 种 结构 型 模式 , 但 它 并 非 用 于 组 织 对 象 , 而 是 用 于 在 不 修改 现 有 对 象 或 从 
其 派生 子 类 的 前 提 下 为 其 增添 职责 。 在 一 些 较 简单 的 例子 中 ,装饰 者 会 透明 而 不 加 修改 地 传递 所 
有 方法 调用 ， 不 过 ， 创 建 装饰 者 的 目的 就 在 于 对 方法 进行 修改 。Head1ightDecorator 就 修改 了 
assemble 和 getPrice 方 法 ， 其 做 法 是 先 传递 方法 调用 ， 然 后 修改 其 返回 结果 。 

尽管 简单 的 组 合 对 象 可 等 同 于 简单 的 装饰 者 ,这 二 者 却 有 着 不 同 的 焦点 。 组 合 对 象 并 不 修改 
方法 调用 ， 其 着 眼 点 在 于 组 织 子 对 象 。 而 装饰 者 存在 的 唯一 目的 就 是 修改 方法 调用 而 不 是 组 织 子 
对 象 ， 因 为 子 对 象 只 有 一 个 。 虽 然 这 两 种 模式 的 结构 惊人 地 相似 ， 但 它们 的 任务 完全 不 同 ， 并 无 
RAZR. 


12.2 ”装饰 者 修改 其 组 件 的 方式 
装饰 者 的 作用 就 在 于 以 某 种 方式 对 其 组 件 对 象 的 行为 进行 修改 。 本 节 将 介绍 一 些 这 方面 的 做 法 。 
12.2.1 在 方法 之 后 添加 行为 


在 方法 之 后 添加 行为 是 最 常见 的 修改 方法 的 做 法 。 具 体 而 言 就 是 先 调用 组 件 的 方法 ， 并 在 其 
返回 后 实施 一 些 附加 的 行为 。Head1ightDecorator 的 getPrice 方 法 就 是 一 个 简单 的 例子 : 


HeadlightDecorator.prototype.getPrice = function() { 
return this.bicycle.getPrice() + 15.00; 
j; 
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在 这 个 例子 中 ， 首 先 对 组 件 调用 getPrice 方 法 ， 然 后 再 把 前 灯 的 价钱 加 在 该 方法 调用 所 返回 
的 价钱 上 ， 最 后 将 其 结果 作为 总 价 返 回 。 这 一 过 程 可 以 根据 需要 多 次 重复 。 作 为 示范 ， 下 面 将 创 
建 一 辆 带 有 两 个 前 灯 和 一 个 尾灯 的 的 自行 车 : 


var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. 
alert(myBicycle.getPrice()); // Returns 399.00 


myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object 
// with the first headlight. 
myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object 
// with the second headlight. 
myBicycle = new TaillightDecorator(myBicycle); // Decorate the bicycle object 
// with a taillight. 
alert(myBicycle.getPrice()); // Now returns 438.00 
该 调用 栈 大 体 是 这 样 的 : 在 Tail1ightDecorator 对 象 (这 是 最 外 层 的 装饰 者 ) 上 调用 getPrice 
方法 ， 这 将 转 而 在 较 外 层 的 Head1ightDecorator 对 象 上 调用 getpPrice 方 法 ， 这 样 继续 下 去 ， 直 到 
到 达 AcmeComfortCruiser 对 象 并 返回 其 价格 。 每 个 装饰 者 都 会 加 上 自己 的 价格 ， 然 后 将 和 返回 给 
相 邻 的 外 层 。 最 后 结果 是 438.00。 
assemble 方 法 是 另 一 个 在 方法 之 后 添加 行为 的 例子 。 这 个 方法 并 不 是 把 多 个 数值 累加 为 最 终 
价格 , 而 是 在 之 前 的 组 装 指示 后 面 添 加 新 的 指示 。 其 最 终结 果 是 对 组 装 整 部 自行 车 所 要 经 历 的 一 
系列 步骤 的 描述 ， 包 括 最 后 安装 那些 由 装饰 者 所 代表 的 部 件 的 步骤 。 
这 是 修改 组 件 方法 最 常见 的 做 法 。 它 在 保留 原 有 行为 的 基础 上 添加 一 些 额外 行为 或 修改 返回 
结果 。 


12.2.2 ”在 方法 之 前 添加 行为 


如 果 行 为 修改 发 生 在 执行 组 件 方法 之 前 , 那么 要 么 必须 把 装饰 者 行为 安排 在 调用 组 件 方法 之 
前 ， 要 么 必须 设法 修改 传递 给 组 件 方法 的 参数 值 。 下 面 的 例子 实现 了 一 个 提供 车 架 颜色 选择 的 装 
饰 者 : 


/* FrameColorDecorator class. */ 


var FrameColorDecorator = function(bicycle, frameColor) { // implements Bicycle 
// Call the superclass's constructor. 
FrameColorDecorator.superclass.constructor.call(this, bicycle); 
this.frameColor = frameColor; 

} 

extend(FrameColorDecorator, BicycleDecorator); // Extend the superclass. 

FrameColorDecorator.prototype.assemble = function() { 
return ‘Paint the frame ' + this.frameColor + ' and allow it to dry. ' + 

this.bicycle.assemble(); 


; 
FrameColorDecorator.prototype.getPrice = function() { ` 


return this.bicycle.getPrice() + 30.00; 


3 
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这 里 有 两 点 与 先前 看 到 的 装饰 者 不 同 。 首 先是 该 装饰 者 多 了 frameColor 这 个 新 状态 。 这 个 状 
态 是 通过 构造 函数 新 增 的 一 个 参数 设置 的 。 第 二 点 差别 在 于 本 例 中 assemb1e 方 法 添加 的 步骤 出 现 
在 其 他 组 装 指示 之 前 而 不 是 之 后 。 不 管 是 在 组 件 方法 之 前 还 是 之 后 添加 行为 ， 它 们 都 是 装饰 者 的 
有 效 实现 方式 。 装 饰 者 并 非 只 能 在 组 件 方法 调用 之 后 进行 修改 或 执行 代码 。 相 反 ， 它 可 以 在 调用 
组 件 方法 之 前 执行 代码 , 或 修改 要 传递 给 该 方法 的 参数 。 装饰 者 也 可 以 增添 一 些 用 以 实现 其 提供 
的 附加 特性 的 属性 (如 本 例 的 frameColor)。 
在 用 FrameColorDecorator 装 饰 过 的 对 象 上 调用 assemblie 方 法 时 ， 新 的 指示 会 被 添加 到 开头 部 
分 : 
var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. 
myBicycle = new FrameColorDecorator(myBicycle, 'red'); // Decorate the bicycle 
// object with the frame color. 
myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object 
// with the first headlight. 
myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object 
// with the second headlight. 
myBicycle = new TaillightDecorator(myBicycle); // Decorate the bicycle object 
// with a taillight. 
alert (myBicycle.assemble()); 
/* Returns: 
"Paint the frame red and allow it to dry. (Full instructions for assembling 
the bike itself go here) Attach headlight to handlebars. Attach headlight 
to handlebars. Attach taillight to the seat post." 
"y 


12.2.3 ”替换 方法 


有 时 为 了 实现 新 行为 必须 对 方法 进行 整体 替换 。 在 此 情况 下 ， 组 件 方法 不 会 被 调用 或 虽然 
被 调用 但 其 返回 值 会 被 抛弃 )。 作 为 这 种 修改 的 一 个 例子 ， 下 面 我 们 将 创建 一 个 用 来 实现 自行 车 
的 终生 保修 的 装饰 者 : 


/* LifetimeWarrantyDecorator class. */ 


var LifetimeWarrantyDecorator = function(bicycle) { // implements Bicycle 
// Call the superclass's constructor. 
LifetimeWarrantyDecorator .superclass.constructor.call(this, bicycle); 


extend(LifetimeWarrantyDecorator, BicycleDecorator); // Extend the superclass. 
LifetimeWarrantyDecorator.prototype.repair = function() { 
return ‘This bicycle is covered by a lifetime warranty. Please take it to ' + 
‘an authorized Acme Repair Center.'; 
}; 
LifetimeWarrantyDecorator.prototype.getPrice = function() { 
return this.bicycle.getPrice() + 199.00; 
}; 


这 个 装饰 者 把 组 件 的 repair 方 法 替换 为 一 个 新 方法 ， 而 组 件 的 方法 则 再 也 不 会 被 调用 。 装 饰 
者 也 可 以 根据 某 种 条 件 决定 是 否 替 换 组 件 方法 , 在 条 件 满 足 时 替换 方法 , 否则 就 使 用 组 件 的 方法 。 
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下 面 这 个 例子 创建 的 装饰 者 用 于 实现 规定 了 保修 期 的 保修 : 


/* TimedWarrantyDecorator class. */ 


var TimedWarrantyDecorator = function(bicycle, coverageLengthInYears) { 
// implements Bicycle 
// Call the superclass's constructor. 
TimedWarrantyDecorator. superclass.constructor.call(this, bicycle); 
this.coverageLength = coverageLengthInYears ; 
this.expDate = new Date(); 
var coverageLengthInMs = this.coverageLength * 365 * 24 * 60 * 60 * 1000; 
this. expDate.setTime( this. expDate.getTime() + coverageLengthInMs) ; 


} 


extend(TimedWarrantyDecorator, BicycleDecorator); // Extend the superclass. 
TimedWarrantyDecorator.prototype.repair = function() { 
var repairInstructions; 
var currentDate = new Date(); 
if(currentDate <this.expDate) { 
repairInstructions = ‘This bicycle is currently covered by a warranty. ' + 
‘Please take it to an authorized Acme Repair Center.'; 


else { 
repairInstructions = this.bicycle.repair(); 


} 


return repairInstructions; 
}; 
TimedWarrantyDecorator.prototype.getPrice = function() { 
return this.bicycle.getPrice() + (40.00 * this.coverageLength) ; 


}; 

这 个 例子 中 的 getPrice 和 repair 方 法 都 会 因 保 修 期 的 长 短 而 有 所 变化 。 如 果 尚 在 保修 期 
内 ， 你 会 得 到 “把 自行 车 送 到 维修 中 心 ”这 样 的 维修 指示 ， 否 则 被 调用 的 将 是 组 件 的 repair 
方法 。 

在 此 之 前 的 那些 装饰 者 的 应 用 顺序 并 不 重要 。 但 是 ,它们 都 必须 放 在 最 后 应 用 ,或 至 少 要 放 
在 所 有 其 他 修改 repair 方 法 的 装饰 者 之 后 应 用 。 在 使 用 替换 组 件 方法 的 装饰 者 时 ， 必 须 留 意 用 装 
饰 者 包装 自行 车 的 顺序 。 使 用 工厂 方法 可 以 简化 这 一 使 用 过 程 ， 但 不 管 是 否 使 用 工厂 方法 ， 如 果 
顺序 事 关 紧要 ， 那么 装饰 者 就 失去 了 部 分 灵活 性 。 本 节 之 前 所 讲 的 所 有 装饰 者 按 任 何 顺序 应 用 都 
可 以 正常 发 挥 作用 ， 因 此 可 以 根据 需要 透明 而 又 动态 地 添加 它们 。 而 在 引入 替换 组 件 方法 的 装饰 
者 之 后 ， 必 须 设 法 确保 按 正确 的 顺序 应 用 装饰 者 。 


12.2.4 添加 新 方法 


前 面 的 例子 所 讲 的 修改 都 发 生 在 接口 所 定义 的 方法 中 (组件 也 具有 这 些 方法 )， 但 这 并 不 是 
一 种 必然 的 要 求 。 装 饰 者 也 可 以 定义 新 方法 ， 不 过 ， 要 想 稳妥 地 实现 这 一 点 并 不 容易 。 要 想 使 用 
这 些 新 方法 , 外 围 代码 首 先 必须 知道 有 这 样 一 些 新 方法 ,由 于 这 些 新 方法 并 不 是 在 接口 中 定义 的 ， 
而 且 它 们 是 动态 添加 的 ， 因 此 有 必要 进行 类 型 检查 ， 以 验 明 用 于 包装 组 件 对 象 的 最 外 层 装饰 者 。 
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与 用 新 方法 装饰 组 件 对 象 相 比 ， 对 现 有 方法 进行 修改 更 容易 实施 ， 而 且 更 不 容易 出 错 ， 这 是 因为 
采用 后 一 种 做 法 时 ， 被 装饰 的 对 象 用 起 来 与 之 前 没什么 不 同 ， 外 围 代码 也 就 不 需要 修改 。 

话 虽 如 此 , 在 装饰 者 中 添加 新 方法 有 时 也 是 为 类 增添 功能 的 一 种 强 有 力 的 手段 。 我 们 可 以 用 
这 种 装饰 者 为 自行 车 对 象 增添 一 个 按 铃 方法 。 这 是 一 个 新 功能 , 没有 装饰 者 自行 车 就 不 可 能 执行 
这 个 任务 : 


/* BellDecorator class. */ 


var BellDecorator = function(bicycle) { // implements Bicycle 
BellDecorator. superclass.constructor.call ( this, bicycle); // Call the superclass's constructor. 


extend(BellDecorator, BicycleDecorator); // Extend the superclass. 
BellDecorator.prototype.assemble = function() { 

return this.bicycle.assemble() + ' Attach bell to handlebars. '; 
}5 
Bel lDecorator.prototype.getPrice = function() { 

return this.bicycle.getPrice() + 6.00; 
}; 
BellDecorator.prototype.ringBell = function() { 

return ‘Bell rung.'; 


2 


这 与 先前 讲 过 的 装饰 者 非常 相似 ， 差 别 只 在 于 它 实现 了 ringBe11 这 个 未 见于 接口 中 的 方法 。 
用 这 个 对 象 装饰 的 自行 车 现在 有 了 新 的 功能 : 


var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. 

myBicycle = new BellDecorator(myBicycle); // Decorate the bicycle object 
// with a bell. 

alert (myBicycle.ringBell()); // Returns ‘Bell rung. ' 

Be11Decorator 必 须 放 在 最 后 应 用 ,否则 这 个 新 方法 将 无 法 访问 。 这 是 因为 其 他 装饰 者 只 能 传 
递 它 们 知道 的 方法 ， 也 即 那些 定义 在 接口 中 的 方法 。 由 于 其 他 装饰 者 都 不 知道 ringBe11 方 法 ， 如 
果 你 在 添加 了 铃 锚 之 后 再 添加 前 灯 的 话 ， 那 么 Be1llDecorator 中 定义 的 新 方法 实际 上 会 被 
Head] ightDecorator## it : 


var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. 
myBicycle = new BellDecorator(myBicycle); // Decorate the bicycle object 
// with a bell. 
myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object 
// with a headlight. 

alert (myBicycle.ringBell()); // Method not found. 

这 个 问题 有 几 种 解决 办 法 。 你 可 以 在 接口 中 添加 ringBe11 方 法 ， 并 在 BicycleDecorator 超 类 
中 实现 它 ， 这 样 一 来 外 层 的 装饰 者 对 象 就 会 传递 这 个 方法 。 这 个 办 法 并 不 理想 ， 因 为 这 样 -来 所 
有 实现 Bicycle 接 口 的 对 象 都 必须 实现 这 个 方法 ， 哪 怕 它 是 一 个 空 方法 或 者 根本 不 会 被 使 用 。 另 
一 种 解决 办 法 是 用 一 个 设置 过 程 (set process〉 来 创建 装饰 者 ， 它 可 以 确保 如 果 使 用 了 Be11- 
Decorator 对 象 的 话 ， 这 个 对 象 一 定 是 处 于 最 外 层 的 装饰 者 。 作 为 一 个 临时 性 措施 这 个 方案 还 不 
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错 ， 但 要 是 还 有 另外 一 个 装饰 者 也 实现 了 一 个 新 方法 的 话 ， 这 就 不 管用 了 ， 因 为 这 样 一 来 ， 一 次 
只 能 使 用 其 中 的 一 个 ， 否 则 总 有 一 个 装饰 者 定义 的 所 有 新 方法 会 被 掩盖 。 

最 好 的 解决 办 法 是 在 BicycleDecorator 的 构造 函数 中 添加 一 些 代 码 ， 它 们 对 组 件 对 象 进行 检 
查 ， 并 为 其 拥有 的 每 一 个 方法 创建 一 个 通道 方法 (pass-through method )。 这 样 一 来 ， 如 果 在 
Be11Decorator (或 任何 其 他 实现 了 新 方法 的 装饰 者 ) 外 再 囊 上 另 一 个 装饰 者 的 话 ， 内 层 装 饰 者 
定义 的 新 方法 仍然 可 以 访问 。 下 面 的 代码 就 采用 了 这 个 解决 方案 : 


/* The BicycleDecorator abstract decorator class, improved. */ 


var BicycleDecorator = function(bicycle) { // implements Bicycle 
this.bicycle = bicycle; 
this.interface = Bicycle; 


// Loop through all of the attributes of this.bicycle and create pass-through 
// methods for any methods that aren't currently implemented. 
outerloop: for(var key in this.bicycle) { 
// Ensure that the property is a function. 
if(typeof this.bicycle[key] !== ‘function') { 
continue outerloop; 
} 
// Ensure that the method isn't in the interface. 
for(var i = 0, len = this.interface.methods.length; i < len; i++) { 
if(key === this.interface.methods[i]) { 
continue outerloop; 
} 
} 


// Add the new method. 
var that = this; 
(function(methodName) { 
that[methodName] = function() { 
return that.bicycle[methodName ] () ; 
} 
; })(key); 


} 
BicycleDecorator.prototype = { 
assemble: function() { 
return this.bicycle.assemble(); 


wash: function() { 
return this.bicycle.wash(); 


ride: function() { 
return this.bicycle.ride(); 


}, 


repair: function() { 
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return this.bicycle.repair(); 


getPrice: function() { 
return this.bicycle.getPrice(); 
} 
}; 


在 这 个 例子 中 ， 接 口中 的 方法 都 如 通常 一 样 定义 在 BicycleDecorator 的 prototype 中 。 
BicycleDecorator 构 造 函 数 对 组 件 对 象 进行 检查 ， 并 为 所 找到 的 每 一 个 未 见于 接口 中 的 方法 创建 
一 个 新 的 通道 方法 。 这 样 一 来 ， 外 层 的 装饰 者 就 不 会 掩盖 内 层 装 饰 者 定义 的 新 方法 ， 你 可 以 自由 
自在 地 创建 各 种 实现 新 方法 的 装饰 者 ， 而 不 用 担心 这 些 新 方法 无 法 访问 。 


12.3 工厂 的 角色 


前 几 节 中 已 经 提 到 ， 装 饰 者 的 应 用 顺序 有 时 很 重要 。 在 理想 情况 下 ,装饰 者 应 该 能 够 以 一 种 
完全 与 顺序 无 关 的 方式 创建 ， 然 而 这 并 不 总 是 能 够 办 到 。 如 果 必 须 确保 某 种 特定 顺序 ， 那 么 可 以 
为 此 使 用 工厂 对 象 。 实 际 上 ， 不 管 顺序 是 否 要 紧 ， 工 厂 都 很 适合 于 创建 装饰 对 象 。 本 节 将 重 写 第 
7 章 中 创建 的 AcmeBicyclieShop 类 的 createBicycle 方 法 ， 以 便 用 户 可 以 指定 自行 车 要 配 的 选 件 。 这 
些 选 件 将 被 转化 为 装饰 者 ， 并 在 方法 返回 之 前 被 应 用 到 新 创建 的 自行 车 对 象 上 。 


原来 的 AcmeBicycleShop 类 如 下 所 示 : 
/* Original AcmeBicycleShop factory class. */ 


var AcmeBicycleShop = function() {}; 

extend(AcmeBicycleShop, BicycleShop) ; 

AcmeBicycleShop.prototype.createBicycle = function(model) { 
var bicycle; 


switch(model) { 

case ‘The Speedster’: 
bicycle = new AcmeSpeedster(); 
break; 

case ‘The Lowrider’: 
bicycle = new AcmeLowrider(); 
break; 

case ‘The Flatlander': 
bicycle = new AcmeFlatlander(); 
break; 

case ‘The Comfort Cruiser’: 

default: 
bicycle = new AcmeComfortCruiser(); 


Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 


这 个 类 的 改进 版 允许 用 户 指定 想 为 自行 车 配 的 选 件 。 在 这 里 ,使 用 工厂 模式 可 以 统 揽 各 种 类 
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〈 既 包括 自行 车 类 也 包括 装饰 者 类 )。 把 所 有 这 些 信息 保存 在 一 个 地 方 , 用户 就 可 以 把 实际 的 类 名 
与 客户 代码 隔离 开 ， 这 样 以 后 添加 新 类 或 修改 现 有 类 也 就 更 容易 。 下 面 是 这 个 改进 版 的 代码 ; 


/* AcmeBicycleShop factory class, with decorators. */ 


var AcmeBicycleShop = function() {}; 
extend(AcmeBicycleShop, BicycleShop); 
AcmeBicycleShop.prototype.createBicycle = function(model, options) { 
// Instantiate the bicycle object. 
var bicycle = new AcmeBicycleShop.models[model](); 


// Iterate through the options and instantiate decorators. 
for(var i = 0, len = options. length; i < len; i++) { 
var decorator = AcmeBicycleShop.options[options[i].name]; 
if(typeof decorator !== 'function') { 
throw new Error('Decorator ' + options[i].name + ' not found.'); 
} 
var argument = options[i].arg; 
bicycle = new decorator(bicycle, argument); 


} 


// Check the interface and return the finished object. 
Interface.ensureImplements(bicycle, Bicycle); 
return bicycle; 


}; 


// Model name to class name mapping. 
AcmeBicycleShop.models = { 

‘The Speedster’: AcmeSpeedster, 

‘The Lowrider’: AcmeLowrider, 

‘The Flatlander': AcmeFlatlander, 

‘The Comfort Cruiser’: AcmeComfortCruiser 


}; 


// Option name to decorator class name mapping. 
AcmeBicycleShop.options = { 
"headlight': HeadlightDecorator, 
‘taillight’: TaillightDecorator, 
"bell': BellDecorator, 
‘basket’: BasketDecorator, 
‘color’: FrameColorDecorator, 
‘lifetime warranty’: LifetimeWarrantyDecorator, 
"timed warranty’: TimedWarrantyDecorator 
}; 
如 果 顺序 很 重要 , 那么 可 以 添加 一 些 代 码 , 在 使 用 选 件数 组 实例 化 装饰 者 之 前 对 其 进行 排序 。 
用 工厂 实例 化 自行 车 对 象 有 许多 好 处 。 首 先 ， 不 必 了 解 自行 车 和 装饰 者 的 各 种 类 名 ,， 所 有 这 
些 信息 都 封装 在 AcmeBicyc1eShop 类 中 .。 因此 添加 自行 车 型 号 和 选 件 非常 容易 ,只 要 把 它们 添加 到 
AcmeBicycleShop.mode1s 或 AcmeBicycleShop.options 数 组 中 即 可 。 作 为 一 个 示范 ， 我 们 来 比较 一 
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下 创建 带 装饰 的 自行 车 对 象 的 两 种 不 同 做 法 。 第 一 种 做 法 不 使 用 工厂 : 


var myBicycle = new AcmeSpeedster(); 

myBicycle = new FrameColorDecorator(myBicycle, 'blue'); 
myBicycle = new HeadlightDecorator(myBicycle); 
myBicycle = new TaillightDecorator(myBicycle); 
myBicycle = new TimedWarrantyDecorator(myBicycle, 2); 


采用 这 种 直接 实例 化 对 象 的 做 法 ， 与 客户 代码 紧密 耦合 在 一 起 的 类 不 下 5 个 。 与 此 相 比 ， 下 
面 所 示 的 第 二 种 做 法 使 用 了 工厂 ， 与 客户 代码 耦合 在 一 起 的 只 有 一 个 类 ， 即 那个 工厂 本 身 ; 


var alecsCruisers = new AcmeBicycleShop(); 

var myBicycle = alecsCruisers.createBicycle('The Speedster’, [ 

{ name: ‘color’, arg: ‘blue' }, 

{ name: ‘headlight’ }, 

{ name: ‘taillight’ }, 

{ name: ‘timed warranty’, arg: 2 } 

]); 

该 工厂 会 对 经 历 了 最 后 一 道 装饰 的 对 象 进行 接口 检查 ， 以 确保 它 实现 了 正确 的 接口 。 这 意味 
着 你 可 以 相信 它 创建 出 来 的 对 象 能 做 你 希望 它 做 的 事 。 这 也 意味 着 任何 使 用 createBicycle 方 法 
的 代码 只 管 使 用 它 创 建 出 来 的 对 象 就 行 ,不 必 关 心 它 是 一 个 自行 车 对 象 还 是 一 个 装饰 者 对 象 ， 这 
是 由 于 它们 实现 了 同样 的 接口 ， 因 此 对 于 客户 代码 来 说 它们 没有 本 质 上 的 区 别 。 

最 后 要 说 的 是 ， 如 果 有 必要 的 话 ， 工 厂 可 以 对 选 件 进行 排序 。 某 些 装饰 者 修改 组 件 方法 的 方 
式 决定 了 它们 需要 最 先 或 最 后 被 应 用 , 在 此 情况 下 工厂 的 这 种 作用 尤其 有 用 。 那 种 会 替换 组 件 方 
法 而 不 是 对 其 进行 扩充 的 装饰 者 需要 放 在 最 后 创建 ， 以 确保 其 成 为 最 外 层 的 装饰 者 。 


12.4 ”函数 装饰 者 


装饰 者 并 不 局 限于 类 。 你 也 可 以 创建 用 来 包装 独立 的 函数 和 方法 的 装饰 者 。 在 某 些 语言 中 这 
是 一 种 常见 的 技术 。 这 种 技术 在 Python 中 应 用 很 广 ， 以 致 于 函数 装饰 者 已 经 成 了 其 语言 核心 中 的 
内 置 成 分 。 

下 面 是 一 个 简单 的 函数 装饰 者 的 例子 ， 这 个 装饰 者 包装 了 另 一 个 函数 ， 其 作用 在 于 将 被 包装 
者 的 返回 结果 改 为 大 写 形式 : 


function upperCaseDecorator(func) { 
return function() { 
return func.apply(this, arguments).toUpperCase(); 


} 
这 个 装饰 者 可 以 用 来 创建 新 函数 ， 后 者 执行 起 来 与 普通 函数 没什么 不 同 。 下 面 的 例子 先 定义 
了 一 个 普通 函数 ， 然 后 将 其 装饰 为 一 个 新 函数 ， 


function getDate() { 
return (new Date()).toString(); 


} 
getDateCaps = upperCaseDecorator(getDate) ; 
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getDateCaps 函 数 的 调用 方式 与 其 他 函数 没什么 不 一 样 。 它 会 以 大 写 形式 返回 调用 结果 : 


alert(getDate()); // Returns Wed Sep 26 2007 20:11:02 GMT-0700 (PDT) 
alert(getDateCaps()); // Returns WED SEP 26 2007 20:11:02 GMT-0700 (PDT) 


在 前 面 那个 函数 装饰 者 的 定义 中 ，func.apply 的 作用 在 于 执行 被 包装 的 函数 。 这 意味 着 它 也 
可 以 用 来 包装 方法 : 
BellDecorator.prototype.ringBellLoudly = 
upperCaseDecorator(BellDecorator.prototype.ringBell); 


var myBicycle = new AcmeComfortCruiser(); 
myBicycle = new BellDecorator(myBicycle); 


alert (myBicycle.ringBell()); // Returns ‘Bell rung. ' 
alert(myBicycle.ringBellLoudly()); // Returns "BELL RUNG.’ 


函数 装饰 者 在 对 另 一 个 函数 的 输出 应 用 某 种 格式 或 执行 某 种 转换 这 方面 很 有 用 处 。 例如 ， 你 
可 以 创建 一 个 用 来 包装 自行 车 类 的 assemble 方 法 的 函数 装饰 者 ， 让 它 用 别 的 语言 返回 组 装 指示 
(不 过 这 会 是 一 个 非常 庞大 的 装饰 者 )。 你 也 可 以 创建 一 个 函数 装饰 者 ,用 它 包装 那 种 返回 数值 的 
函数 ， 并 将 该 数值 转换 为 别 的 数 制 形式 。 函数 装 饰 者 给 程序 员 带 来 了 极 大 的 灵活 性 ,而 实现 它 所 
需要 的 代码 比 大 而 全 的 类 装饰 者 少 得 多 。 


12.5 ” 闭 饰 者 模式 的 适用 场合 


如 有 果 需 要 为 类 增添 特性 或 职责 ， 而 从 该 类 派生 子 类 的 解决 办 法 并 不 实际 的 话 ， 就 应 该 使 用 装 
饰 者 模式 。 派 生子 类 之 所 以 会 不 实际 ,最 常见 的 原因 是 需要 增添 的 特性 的 数量 和 组 合 要 求 使 用 大 
量子 类 。 自 行车 商店 的 例子 就 说 明了 这 一 点 。 这 个 例子 中 涉及 7 种 不 同 的 自行 车 选 件 ， 其 中 一 些 
选 件 你 还 可 以 应 用 多 次 , 这 意味 着 如 果 不 采 用 装饰 者 模式 的 话 ， 要 达到 同样 的 目的 需要 数 以 千 计 
的 子 类 。 从 这 个 意义 上 讲 , 装饰 者 模式 甚至 可 以 被 视 为 一 种 优化 模式 ， 因 为 在 此 场合 下 它 节省 的 
代码 量 可 达 几 个 数量 级 。 

如 果 需 要 为 对 象 增添 特性 而 又 不 想 改变 使 用 该 对 象 的 代码 的 话 ， 也 可 以 采用 装饰 者 模式 。 因 
为 装饰 者 可 以 动态 而 又 透明 地 修改 对 象 , 所 以 它们 很 适合 于 修改 现 有 系统 这 一 任务 。 相 比 卷 入 创 
建 和 维护 子 类 的 麻烦 ， 创 建 和 应 用 一 些 装饰 者 往往 要 省 事 得 多 。 


12.6 示例 : 方法 性 能 分 析 器 


装饰 者 模式 擅长 于 为 各 种 对 象 增添 新 特性 。 本 例 要 创建 的 装饰 者 可 以 用 来 包装 任何 对 象 ， 
以 便 为 其 提供 方法 性 能 分 析 (method profiling) 功能 。 我 们 打算 在 每 个 方法 调用 的 前 后 添加 二 
些 代码 ， 分 别 用 于 启动 计时 器 和 停止 计时 器 并 报告 结果 。 这 个 装饰 者 必须 完全 透明 ， 这 样 它 才 
能 应 用 于 任何 对 象 而 又 不 干扰 其 正常 的 代码 执行 。 它 也 应 该 能 适用 于 任何 对 象 ， 无 论 其 实现 的 
是 什么 接口 。 我 们 将 先 创建 一 个 实现 了 计时 功能 的 速成 版 装饰 者 ， 然 后 再 将 其 改造 为 通用 型 装 
饰 者 。 
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我 们 需要 一 个 用 来 测试 的 样 例 类 。 下 面 的 ListBuilder 类 就 是 用 于 这 个 目的 ， 其 唯一 的 功能 


是 在 网 页 上 创建 一 个 有 序列 表 : 


/* ListBuilder class. */ 


var ListBuilder = function(parent, listLength) { 
this.parentEl = $(parent); 
this.listLength = listLength; 
}; 
ListBuilder.prototype = { 
buildList: function() { 
var list = document.createElement('ol'); 
this.parentE1.appendChild(list) ; 


for(var i = 0; i < this.listLength; i++) { 
var item = document.createElement('li'); 
list. appendChild(item) ; 


} 
J; 


我 们 首先 要 创建 一 个 专用 于 这 个 ListBuilder 类 的 装饰 者 ， 它 将 记录 执行 buildList 方 法 所 耗 


用 的 时 间 。 我 们 用 console.1og 输 出 这 些 结果 。 运 行 这 段 代 码 时 ， 要 知道 并 非 所 有 浏览 器 都 实现 
了 console 对 象 : 


/* SimpleProfiler class. */ 


var SimpleProfiler = function(component) { 
this.component = component; 
}; 
SimpleProfiler.prototype = { 
buildList: function() { 
var startTime = new Date(); 
this.component.buildList(); 
var elapsedTime = (new Date()).getTime() - startTime.getTime(); 
console. log('buildlList: ' + elapsedTime + ' ms‘); 
} 
}; 


SimpleProfiler 是 ListBuilder 的 一 个 装饰 者 。 它 也 实现 了 ListBuilder 中 的 buildList 这 个 方 


法 , 并 且 在 传递 该 方法 调用 的 语句 前 后 添加 了 一 些 计 时 用 的 代码 。 调 用 SimpleProfiler 的 方法 时 ， 
将 输出 调用 组 件 的 同名 方法 所 耗费 的 时 间 。 为 了 测试 这 个 装饰 者 ， 我 们 可 以 创建 一 个 包含 5000 
个 元 素 的 列表 ， 看 看 要 花 多 长 时 间 : 


var list = new ListBuilder('list-container', 5000); // Instantiate the object. 
list = new SimpleProfiler(list); // Wrap the object in the decorator. 
list.buildlist(); // Creates the list and displays “buildList: 298 ms". 


明白 该 装饰 者 的 工作 机 制 之 后 ,现在 要 考虑 的 是 如 何 对 其 进行 通用 化 改造 ， 使 其 可 用 于 任何 


对 象 。 为 了 达到 这 个 目的 ， 必 须 让 装饰 者 逐一 检查 组 件 对 象 的 所 有 属性 ， 为 找到 的 每 一 个 方法 创 
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建 一 个 通道 方法 。 这 些 通道 方法 也 必须 包含 启动 和 停止 计时 器 的 代码 : 


/* MethodProfiler class. */ 


var MethodProfiler = function(component) { 
this.component = component; 
this.timers = {}; 


for(var key in this.component) { 
// Ensure that the property is a function. 
if(typeof this.component[key] !== 'function') { 
continue; r 


} 


// Add the method. 

var that = this; 

(function(methodName) { 

that[methodName] = function() { 
that.startTimer (methodName) ; 
var returnValue = that.component[methodName].apply(that.component, 
arguments); 

that.displayTime(methodName, that.getElapsedTime(methodName)); 
return returnValue; 


}; 
})(key); } 


j 
MethodProfiler.prototype = { 
startTimer: function(methodName) { 
this.timers[methodName] = (new Date()).getTime(); 


h 
getElapsedTime: function(methodName) { 
return (new Date()).getTime() - this.timers[methodName]; 


}, 
displayTime: function(methodName, time) { 
console. log(methodName + ': ' + time + ‘ ms’); 


j 

先 从 简单 的 部 分 说 起 。prototype 中 的 方法 负责 执行 计时 任务 。 其 中 startTimer 用 于 获取 起 
始 时 间 并 以 毫秒 为 单位 保存 其 值 ?。getE1apsedTime 会 读 取 起 始 时 间 ， 然 后 用 当前 时 间 减 去 该 时 
间 以 得 到 耗费 的 时 间 。displayTime 用 于 输出 方法 的 名 称 以 及 执行 该 方法 所 耗费 的 时 间 ( 以 毫秒 
为 单位 )。 

需要 仔细 看 看 那个 构造 函数 ， 特 别 是 那个 for. . in 循环。 这 个 循环 逐一 检查 组 件 对 象 的 每 一 
个 属性 ， 跳 过 不 是 方法 的 属性 ， 如 果 遇 到 方法 属性 ， 则 为 装饰 者 添加 一 个 同名 的 新 方法 。 这 样 添 
加 的 新 方法 中 的 代码 会 启动 计时 器 、 调 用 组 件 的 同名 方法 (把 所 有 参数 传递 给 它 ， 并 保存 其 返回 
值 )、 停 止 并 显示 计时 器 以 及 返回 先前 保存 下 来 的 组 件 的 同名 方法 的 返回 值 。 这 种 方法 的 声明 被 


© 即 自 格林 尼 治 标准 时 间 1970 年 1 月 1 日 0 时 起 到 该 时 刻 所 经 历 的 毫秒 数 。 一 一 译 者 注 
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包装 在 一 个 匿名 函数 中 ， 其 目的 在 于 保留 正确 的 methodName 变 量 值 ”。 

在 测试 该 装饰 者 之 前 ， 先 为 ListBui1der 添 加 一 个 新 方法 removeLists， 并 修改 一 下 bui1dList 
方法 。 现 在 这 两 个 方法 都 有 一 个 参数 ， 它 可 以 用 来 说 明 相 关 列 表 是 有 序列 表 还 是 无 序列 表 。 这 个 
ListBuilder 与 其 第 一 个 版 本 已 经 有 了 足够 大 的 差别 ， 用 一 个 MethodProfiler 对 象 来 装饰 它 ， 看 看 
结果 如 何 : 


var list = new ListBuilder('list-container', 5000); 

list = new MethodProfiler(list); 

list.buildList('ol'); // Displays “buildList: 301 ms". 
list.buildList('ul'); // Displays "buildList: 287 ms". 
list.removeLists('ul'); // Displays "removeLists: 10 ms". 
list.removeLists('ol'); // Displays "removeLists: 12 ms”. 


这 个 例子 出 色 地 应 用 了 装饰 者 模式 。 那 个 性 能 分 析 器 完全 透明 ， 它 可 以 为 各 种 对 象 添 加 功 
能 ， 为 此 并 不 需要 从 那些 对 象 派 生子 类 。 只 使 用 这 一 个 装饰 者 类 即 可 轻而易举 地 对 各 种 各 样 的 
对 象 进行 装饰 。 因 为 它 可 以 透明 地 执行 任何 对 它 进行 的 方法 调用 ， 所 以 其 他 代码 并 不 知道 而 且 
也 不 关心 它 的 存在 。 你 甚至 可 以 在 其 基础 上 再 应 用 其 他 装饰 者 ， 以 实现 别 的 功能 或 进行 其 他 类 
型 的 性 能 跟踪 。 


12.7 ”装饰 者 模式 之 利 


装饰 者 是 在 运行 期 间 为 对 象 增添 特性 或 职责 的 有 力 工具 。 在 自行 车 商店 那个 例子 中 , 通过 使 
用 装饰 者 ,你 可 以 动态 地 为 自行 车 对 象 添加 可 选 的 特色 配件 。 在 只 有 部 分 对 象 需 要 这 些 特性 的 情 
况 下 装饰 者 模式 的 好 处 尤为 突出 。 如 果 不 采 用 这 种 模式 ,那么 要 想 实现 同样 的 效果 必须 使 用 大 量 
子 类 。 


O 这 个 问题 可 以 用 一 个 简化 的 例子 来 说 明 : 
var aFns = new Array(2); 
for (var i = 0; i < aFns.length; ++i) { 
aFns[i] = function() { alert(i): }; 
} 
aFns[0J(); aFns[1](); 

上 例 中 的 两 个 输出 结果 都 是 2。 函 数 aFns[0] 和 aFns[1] 拥 有 相同 的 定义 作用 域 〈 即 定义 它们 的 作用 域 是 同一 
个 )， 所 以 它们 引用 的 是 这 个 作用 域 中 的 同一 个 变量 i。 在 循环 结束 后 这 个 i 的 值 是 2， 所 以 两 个 函数 执行 的 结果 都 
是 输出 2 这 个 值 。 如 果 把 代码 改 为 : 
var aFns = new Array(2); 
for (var i = 0; i < aFns.length; ++i) { 

(function(nIndex) { aFns[nIndex] = function() { alert(nIndex); }; })(i): 
} 
aFns[0](); aFns[1](); 
那么 其 输出 结果 分 别 为 0 和 1。 循 环 体 中 的 那个 匿名 函数 执行 了 两 次 ， 每 次 各 有 一 个 不 同 的 调用 对 象 〈call object. 
参见 《JavaScript 权 威 指南 》)， 所 以 定义 函数 aFns[0] 和 aFns[1] 的 作用 域 并 不 相同 。 因 此 ， 虽 然 这 两 个 函数 都 引用 
了 名 为 nIndex 的 变量 ， 但 实际 上 它们 所 引用 的 变量 是 存在 于 不 同 的 作用 域 中 的 两 个 同名 变量 。 在 定义 aFns[0] 的 
作用 域 中 nIndex 为 0， 而 在 定义 aFns[1] 的 作用 域 中 nIndex 为 1!， 这 就 是 输出 结果 分 别 为 0O 和 1 的 原因 。 一 一 译 者 注 
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装饰 者 的 运作 过 程 是 透明 的 ， 这 就 是 说 你 可 以 用 它 包装 其 他 对 象 ， 然 后 继续 按 之 前 使 用 那些 
对 象 的 方法 来 使 用 它 。 从 MethodProfiler 这 个 示例 中 可 以 看 到 ， 这 一 切 甚至 可 以 动态 实现 ， 不 用 
事先 知道 组 件 对 象 的 接口 。 在 为 现 有 对 象 添 砖 加 瓦 这 方面 ， 装 饰 者 模式 为 程序 员 带 来 了 极 大 的 灵 
活性 。 


12.8 ”装饰 者 模式 之 商 


装饰 者 模式 的 缺点 主要 表现 在 两 个 方面 。 首先 ， 在 遇 到 用 装饰 者 包装 起 来 的 对 象 时 ， 那 些 依 
赖 于 类 型 检查 的 代码 会 出 问题 。 尽管 在 JavaScript 中 很 少 使 用 严格 的 类 型 检查 , 但 是 如 果 你 的 代码 
中 执行 了 这 样 的 检查 ,那么 装饰 者 是 无 法 匹配 所 需要 的 类 型 的 。 通 常 装饰 者 对 客户 代码 来 说 是 完 
全 透明 的 ， 不 过 ， 在 这 种 情况 下 ， 客 户 代码 就 能 感知 装饰 者 与 其 组 件 的 不 同 。 

第 二 ， 使 用 装饰 者 模式 往往 会 增加 架构 的 复杂 程度 。 这 种 模式 常常 要 引入 许多 小 对 象 ， 它 们 
看 起 来 比较 相似 〈 参 见 自行 车 商店 一 例 )， 而 实际 功能 却 大 相 径 庭 。 装 饰 者 模式 往往 不 太 容易 理 
解 ， 对 于 那些 不 熟悉 这 种 模式 的 开发 人 员 而 言 尤其 如 此 。 此 外 ， 实 现 具有 动态 接口 的 装饰 者 (如 
MethodProfiler) 涉及 的 语法 细节 有 时 也 会 令 人 生 晨 。 在 设计 一 个 使 用 了 装饰 者 模式 的 架构 时 ， 
你 必须 多 花 点 心思 ， 确 保 自己 的 代码 有 良好 的 文档 说 明 ， 并 且 容易 理解 。 


12.9 小 结 


本 章 讲述 了 一 种 既 不 用 创建 子 类 ， 又 能 透明 、 动 态 地 为 对 象 增添 功能 的 设计 模式 。 装 饰 者 模 
式 可 以 在 不 修改 类 定义 的 前 提 下 用 来 为 具体 对 象 添加 特性 。 我 们 再 次 研究 了 自行 车 商店 的 例子 ， 
并 用 工厂 模式 来 创建 具有 多 种 可 定制 选 件 的 自行 车 。 我 们 讨论 了 装饰 者 修改 其 包装 的 对 象 的 各 种 
做 法 ， 以 及 与 每 种 做 法 相关 的 一 些 注意 事项 。 作 为 一 个 实用 性 的 练习 ， 我 们 还 创建 了 一 个 具有 动 
态 接口 的 装饰 者 ， 它 可 以 用 来 记录 执行 一 个 对 象 的 方法 所 耗费 的 时 间 。 

只 要 懂得 装饰 者 模式 的 工作 机 制 ， 你 就 会 明白 它 是 多 么 有 用 。 我 们 用 7 个 装饰 者 就 完成 了 本 
来 需要 几 千 个 子 类 才能 完成 的 任务 ， 这 足以 说 明 问题 。 鉴 于 装饰 者 的 完全 透明 性 ， 使 用 这 种 模式 
时 你 不 用 老 是 担心 系统 会 因此 而 失灵 或 产生 不 兼容 问题 。 这 是 一 种 不 用 重新 定义 对 象 就 能 对 其 进 
行 扩充 的 简便 手段 。 
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章 要 探讨 的 是 另 一 种 优化 模式 一 一 享 元 (flyweight) 模式 。 它 最 适合 于 解决 因 创建 

大 量 类 似 对 象 而 累及 性 能 的 问题 。 这 种 模式 在 JavaScript 中 尤其 有 用 ， 因 为 复杂 的 
JavaScript 代 码 可 能 很 快 就 会 用 光 浏 览 器 的 所 有 可 用 内 存 。 通 过 把 大 量 独立 对 象 转化 为 少量 共 
享 对 象 ， 可 以 降低 运行 Web 应 用 程序 所 需 的 资源 数量 。 这 种 技术 带 来 的 好 处 可 大 可 小 。 对 于 
那些 可 能 一 连用 上 几 天 也 不 会 重新 加 载 的 大 型 应 用 系统 ， 任 何 减少 内 存 用 量 的 技术 都 有 非常 
显著 的 效果 。 而 对 于 那些 不 会 在 浏览 器 中 打开 那么 长 时 间 的 小 型 网 页 ， 内 存 的 节约 就 没 那么 
重要 。 . 


13.1 享 元 的 结构 


刚 接触 亭 元 模式 的 时 候 其 工作 机 人 制 可 能 很 难 理解 . 我 们 先 对 其 结构 作 一 鸟 辐 ， 然 后 再 详细 讲 
解 各 个 部 分 。 

享 元 模式 用 于 减少 应 用 程序 所 需 对 象 的 数量 。 这 是 通过 将 对 象 的 内 部 状态 划分 为 内 在 数据 
(intrinsic data) 和 外 在 数据 (extrinsic data) 两 类 而 实现 的 。 内 在 数据 是 指 类 的 内 部 方法 所 需要 的 
信息 , 没有 这 种 数据 的 话 类 就 不 能 正常 运转 。 外 在 数据 则 是 可 以 从 类 身上 剥离 并 存储 在 其 外 部 的 
信息 。 我 们 可 以 将 内 在 状态 相同 的 所 有 对 象 替换 为 同一 个 共享 对 象 , 用 这 种 方法 可 以 把 对 象 数 量 
减少 到 不 同 内 在 状态 的 数量 。 

创建 这 种 共享 对 象 需要 使 用 工厂 ， 而 不 是 普通 的 构造 函数 。 这 样 做 可 以 跟踪 到 已 经 实例 
化 的 各 个 对 象 ， 从 而 仅 当 所 需 对 象 的 内 在 状态 不 同 于 已 有 对 象 时 才 创 建 一 个 新 对 象 。 对 象 的 
外 在 状态 被 保存 在 一 个 管理 器 对 象 中 。 在 调用 对 象 的 方法 时 ， 管 理 器 会 把 这 些 外 在 状态 作为 
参数 传 入 。 

下 面 我 们 逐一 详细 讲解 这 些 细节 。 


13.2 示例 : 汽车 登记 


假设 要 开发 一 个 系统 , 用 以 代表 一 个 城市 的 所 有 汽车 。 你 需要 保存 每 一 辆 汽车 的 详细 情况 ( 品 
牌 、 型 号 和 出 厂 日 期 ) 及 其 所 有 权 的 详细 情况 (车 主 姓名 、 车 牌号 和 最 近 登 记 日 期 )。 当 然 ， 你 
决定 把 每 辆 汽车 表示 为 一 个 对 象 : 
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/* Car class, un-optimized. */ 


var Car = function(make, model, year, owner, tag, renewDate) { 
this.make = make; 
this.model = model; 
this.year = year; 
this.owner = owner; 
this.tag = tag; 
this.renewDate = renewDate; 
}; 
Car.prototype = { 
getMake: function() { 
return this.make; 
}, 
getModel: function() { 
return this.model; 


, 
getYear: function() { 
return this.year; 


3 


transferOwnership: function(newOwner, newTag, newRenewDate) { 
this.owner = newOwner; 
this.tag = newTag; 
this.renewDate = newRenewDate; 

b 

renewRegistration: function(newRenewDate) { 
this.renewDate = newRenewDate; 

}, 

isRegistrationCurrent: function() { 
var today = new Date(); 
return today.getTime() < Date.parse(this.renewDate); 


}; 


这 个 系统 最 初 表现 不 错 。 但 是 随 着 城市 人 口 的 增长 ， 你 发 现 它 一 天 天 地 变 慢 了 。 数 以 十 


万 计 的 汽车 对 象 耗 尽 了 可 用 的 计算 资源 。 要 想 优化 这 个 系统 ， 可 以 采用 享 元 模式 减少 所 需 对 






13.2.1 内 在 状态 和 外 在 状态 I 
分 的 过 程 有 有 声 早 的 随意 性 。 既 要 维持 每 个 对 象 的 模块 性 ， 又 
ee i PB) a a 
数据 (品牌 、 型 号 和 出 厂 F (车 主 姓名 、 车 牌号 和 最 近 登 记 日 


象 的 数目 。 
优化 工作 的 第 一 步 是 把 内 在 状态 与 外 在 状态 分 开 。 
将 对 象 数据 划分 为 内 在 
想 把 尽 可 能 多 的 数据 作为 
期 ) 则 属于 外 在 数据 。 这 意 上 5 ot gaat ， 只 需要 一 个 汽车 对 象 
就 行 。 这 个 数目 还 是 不 少 ， en 每 个 品牌 -型 号 - -出 三 日 期 组 合 
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对 应 的 那个 实例 将 被 所 有 该 类 型 汽车 的 车 主 共享 。 下 面 是 新 版 Car 类 的 代码 我们 将 在 13.2.3 节 中 
说 明 外 在 数据 的 去 向 ): 


/* Car class, optimized as a flyweight. */ 


var Car = function(make, model, year) { 
this.make = make; 
this.model = model; 
this.year = year; 

}; 

Car.prototype = { 
getMake: function() { 
return this .make; 

}, 

getModel: function() { 
return this.model; 

}, 

getYear: function() { 
return this.year; 


J; 

上 面 的 代码 删除 了 所 有 外 在 数据 。 所 有 处 理 登 记事 宣 的 方法 都 被 转移 到 一 个 管理 器 对 象 中 
(不 过 ， 也 可 以 将 这 些 方法 留 在 原 地 ， 并 为 其 增加 对 应 于 各 种 外 在 数据 的 参数 )。 因 为 现在 对 象 的 
数据 已 被 分 为 两 大 部 分 ， 所 以 必须 用 工厂 来 实例 化 它 。 


13.2.2 用 工厂 进行 实例 化 


这 个 工厂 很 简单 。 它 会 检查 之 前 是 否 已 经 创建 过 对 应 于 指定 品牌 -型 号 -出 厂 日 期 组 合 的 汽 
车 ， 如 果 存 在 这 样 的 汽车 那 就 返回 它 ， 否 则 就 创建 一 辆 新 车 ， 并 把 它 保存 起 来 供 以 后 使 用 。 这 就 
确保 了 对 应 于 每 个 唯一 的 内 在 状态 ， 只 会 创建 一 个 实例 : 


/* CarFactory singleton. */ 
var CarFactory = (function() { 
var createdCars = {}; 


return { 
createCar: function(make, model, year) { 

// Check to see if this particular combination has been created before. 

if(createdCars[make + '-' + model + '-' + year]) { 
return createdCars[make + '-' + model + '-' + year]; 

} 

// Otherwise create a new instance and save it. 

else { 
var car = new Car(make, model, year); 
createdCars[make + '-' + model + ‘-' + year] = car; 
return Car; 
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} 
} 
}; 
HO; 


13.2.3 ”封装 在 管理 器 中 的 外 在 状态 


要 完成 这 种 优化 还 需要 一 个 对 象 。 所 有 那些 从 Car 对 象 中 删除 的 数据 必须 有 个 保存 地 点 ， 我 
们 用 一 个 单 体 来 做 封装 这 些 数 据 的 管理 器 。 原 先 的 每 一 个 Car 对 象 现在 都 被 分 割 为 外 在 数据 及 其 
所 属 的 共享 汽车 对 象 的 引用 这 样 两 部 分 。Car 对 象 与 车 主 数据 的 组 合 称 为 汽车 记录 (car record). 
管理 器 存储 着 这 两 方面 的 信息 。 它 还 包含 着 从 原先 的 Car 类 删除 的 方法 : 


/* CarRecordManager singleton. */ 
var CarRecordManager = (function() { 
var carRecordDatabase = {}; 


return { 
// Add a new car record into the city's system. 
addCarRecord: function(make, model, year, owner, tag, renewDate) { 
var car = CarFactory.createCar(make, model, year); 
carRecordDatabase[tag] = { 
Owner: owner, 
renewDate: renewDate, 
car: car 
}; 
}, 


// Methods previously contained in the Car class. 
transferOwnership: function(tag, newOwner, newlag, newRenewDate) { 
var record = carRecordDatabase[ tag]; 
record.owner = newOwner; 
record.tag = newlag; 
record.renewDate = newRenewDate; 
b 
renewRegistration: function(tag, newRenewDate) { 
carRecordDatabase[tag].renewDate = newRenewDate; 
}, 
isRegistrationCurrent: function(tag) { 
var today = new Date(); 
return today.getTime() < Date.parse(carRecordDatabase[tag].renewDate) ; 


} 
}; 
HO; 
从 Car 类 和 剥离 的 所 有 数据 现在 都 保存 在 CarRecordManager 这 个 单 体 的 私 用 属性 carRecord- 
Database 中 。 这 个 carRecordDatabase 对 象 要 比 以 前 使 用 的 一 大 批 对 象 高 效 得 多 。 那 些 处 理 所 有 权 
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事宜 的 方法 现在 也 被 封装 在 这 个 单 体 中 ， 因 为 它们 处 理 的 都 是 外 在 数据 。 

可 以 看 出 ， 这 种 优化 是 以 复杂 性 为 代价 的 。 原 先 有 的 只 是 一 个 类 ， 而 现在 却 变 成 了 一 个 类 
和 两 个 单 体 对 象 。 把 一 个 对 象 的 数据 保存 在 两 个 不 同 的 地 方 这 种 做 法 也 有 点 令 人 困惑 。 但 与 所 
解决 的 性 能 问题 相 比 ， 这 两 点 都 只 是 小 问题 。 如 果 运 用 得 当 ， 那 么 享 元 模式 能 够 显著 地 提升 程 
序 的 性 能 。 


13.3 “管理 外 在 状态 


管理 享 元 对 象 的 外 在 数据 有 许多 不 同 的 方法 。 使 用 管理 器 对 象 是 一 种 常见 做 法 ， 这 种 对 象 有 
一 个 集中 管理 的 数据 库 〈centralized database)， 用 于 存放 外 在 状态 及 其 所 属 的 享 元 对 象 。 汽 车 登 
记 那 个 示例 就 采用 了 这 种 方案 。 其 优点 在 于 简单 、 容 易 维护 。 这 也 是 一 种 比较 轻便 的 方案 ， 因 为 
用 来 保存 外 在 数据 的 只 是 一 个 数组 或 对 象 字面 量 。 我 们 在 后 面 那个 工具 提示 对 象 示例 中 还 要 使 用 
这 种 方案 。 

另 一 种 管理 外 在 状态 的 办 法 是 使 用 组 合 模式 。 借 助 第 9 章 所 讲 的 这 种 模式 ， 你 可 以 用 对 象 
自身 的 层次 体系 来 保存 信息 ， 而 不 需要 另外 使 用 一 个 集中 管理 的 数据 库 。 组 合 对 象 的 叶 节 点 全 
都 可 以 是 享 元 对 象 ， 这 样 一 来 这 些 享 元 对 象 就 可 以 在 组 合 对 象 层次 体系 中 的 多 个 地 方 被 共享 。 
对 于 大 型 的 对 象 层 次 体系 这 非常 有 用 ， 因 为 同样 的 数据 用 这 种 方案 来 表示 时 所 需 对 象 的 数量 要 
少 得 多 。 


13.4 示例 : Web HA 


为 了 演示 用 组 合 对 象 来 保存 外 在 状态 的 具体 做 法 ， 下 面 我 们 要 创建 一 个 Web 日 历 。 首先 实现 
的 是 一 个 未 经 优化 的 、 未 使 用 享 元 的 版 本 。 这 是 一 个 大 型 组 合 对 象 ， 位 于 最 顶层 的 是 代表 年 份 的 
组 合 对 象 。 它 封装 着 代表 月 份 的 组 合 对 象 ， 而 后 者 又 封装 着 代表 日 期 的 叶 对 象 。 这 是 一 个 简单 的 
例子 ， 它 会 按 顺 序 显示 每 月 中 的 各 天 ， 还 会 按 顺序 显示 一 年 中 的 各 个 月 : 


/* CalendarItem interface. */ 
var CalendarItem = new Interface(‘CalendarItem', ['display']); 
/* CalendarYear class, a composite. */ 


var CalendarYear = function(year, parent) { // implements CalendarItem 
this.year = year; 
this.element = document.createElement('div'); 
this.element.style.display = ‘none’; 
parent. appendChild(this.element); 
function isLeapYear(y) { 
return (y > 0) && !(y % 4) && ((y % 100) || !(y % 400)); 


this.months = []; 
// The number of days in each month. 
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this.numDays = [31, isLeapYear(this.year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 
31, 30, 31]; 
for(var i = 0, len = 12; i< len; i++) { 
this.months[i] = new CalendarMonth(i, this.numDays[i], this.element); 
} 
) 
CalendarYear.prototype = { 
display: function() { 
for(var i = 0, len = this.months.length; i < len; i++) { 
this.months[i].display(); // Pass the call down to the next level. 
} 
this.element.style.display = ‘block’; 
} 
}; 


/* CalendarMonth class, a composite. */ 


var CalendarMonth = function(monthNum, numDays, parent) { // implements CalendarItem 
this.monthNum = monthNum; 
this.element = document.createElement('div'); 
this.element.style.display = ‘none’; 
parent.appendChild(this.element) ; 


this.days = []; 
for(var i = 0, len = numDays; i < len; i++) { 
this.days[i] = new CalendarDay(i, this.element) ; 
} 
); 
CalendarMonth.prototype = { 
display: function() { 
for(var i = 0, len = this.days.length; i < len; i++) { 
this.days[i].display(); // Pass the call down to the next level. 
} 
this.element.style.display = ‘block’; 
} 
}; 


/* CalendarDay class, a leaf. */ . 


var CalendarDay = function(date, parent) { // implements CalendarItem 
this.date = date; 
this.element = document.createElement('‘div'); 
this.element.style.display = ‘none’; 
parent.appendChild(this.element); 
}; 
CalendarDay.prototype = { 
display: function() { 
this.element.style.display = ‘block’; 
this.element.innerHTML = this.date; 
} 
j 
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这 段 代 码 的 问题 在 于 ， 你 不 得 不 为 每 一 年 创建 365 个 CalendarDay 对 象 。 要 创建 一 个 显示 10 年 
的 日 历 ， 需 要 实例 化 几 千 个 CalendarDay 对 象 。 这 些 对 象 固然 不 大 ， 但 是 无 论 什 么 类 型 的 对 象 ， 
如 果 其 数目 如 此 之 多 的 话 , 都 会 给 浏览 器 带 来 资源 压力 。 更 有 效 的 做 法 是 无 论 日 历 要 显示 多 少年 ， 
都 只 用 一 个 CalendarDay 对 象 来 代表 所 有 日 期 。 


13.4.1 把 日 期 对 象 转化 为 享 元 


把 CalendarDay 对 象 转化 为 享 元 对 象 的 过 程 很 简单 。 首先 ， 修 改 CalendarDay 类 本 身 ， 除 去 其 


中 保存 的 所 有 数据 ， 让 这 些 数据 〈 日 期 和 父 元 素 ) 成 为 外 在 数据 : 
/* CalendarDay class, a flyweight leaf. */ 


var CalendarDay = function() {}; // implements CalendarItem 
CalendarDay.prototype = { 
display: function(date, parent) { 
var element = document.createElement('div'); 
parent.appendChild(element) ; 
element.innerHTML = date; 
} 
j; 
接 下 来 ， 创 建 日 期 对 象 的 单个 实例 。 所 有 CalendarMonth 对 象 中 都 要 使 用 这 个 实例 。 这 里 本 
来 也 可 以 像 第 一 个 示例 那样 使 用 工厂 来 创建 该 类 的 实例 , 不 过 , 因为 这 个 类 只 需要 创建 一 个 实例 ， 
所 以 直接 实例 化 它 就 行 : 


/* Single instance of CalendarDay. */ 


var calendarDay = new CalendarDay(); 
现在 外 在 数据 成 了 disp1ay 方 法 的 参数 ， 而 不 是 类 的 构造 函数 的 参数 。 这 是 享 元 的 典型 工作 
方式 。 因 为 在 此 情况 下 有 些 〈 或 全 部 ) 数据 被 保存 在 对 象 之 外 ， 要 想 实现 与 之 前 同样 的 功能 就 必 
须 把 它们 提供 给 各 个 方法 。 
最 后 ，CalendarMonth 类 也 要 略 作 修改 。 原 来 用 CalendarDay 类 构造 函数 创建 该 类 实例 的 那个 
表达 式 被 替换 为 calendarDay 对 象 ， 而 那些 原本 提供 给 CalendarDay 类 构造 函数 的 参数 现在 被 转 而 . 
提供 给 display 方 法 : 


/* CalendarMonth class, a composite. */ 


var CalendarMonth = function(monthNum, numDays, parent) { // implements CalendarItem 
this.monthNum = monthNum; 
this.element = document.createElement('div'); 
this.element.style.display = ‘none’; 
parent. appendChild(this.element) ; 


this.days = []; 


for(var i = 0, len = numDays; i < len; i++) { 
this.days[i] = calendarDay; 
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) 
CalendarMonth.prototype = { 
display: function() { 
for(var i = 0, len = this.days.length; i < len; i++) { 
this.days[i].display(i, this.element) ; 


} 
this.element.style.display = ‘block’; 
} 
J; 


13.4.2 ”外 在 数据 保存 在 哪里 


本 例 没 有 像 前 面 的 例子 那样 使 用 一 个 中 心 数据 库 来 保存 所 有 从 享 元 对 象 剥 离 的 数据 。 实 际 
上 ， 其 他 类 基本 上 没 做 什么 修改 :CalendarYear 根 本 没 变 ， 而 CalendarMonth 只 改 了 两 行 。 这 都 是 
因为 组 合 对 象 的 结构 本 身 就 已 经 包含 了 所 有 的 外 在 数据 。 由 于 月 份 对 象 中 的 所 有 日 期 对 象 被 依次 
存放 在 一 个 数组 中 ， 所 以 它 知道 每 一 个 日 期 对 象 的 状态 ， 从 CalendarDay 构 造 函 数 中 剔除 的 两 种 
数据 都 已 经 存在 于 CalendarMonth 对 象 中 。 

这 就 是 组 合 模式 与 享 元 模式 配合 得 如 此 完美 的 原因 。 组 合 对 象 通 常 拥有 大 量 叶 对 象 ， 它 还 保 
存 着 许多 可 作为 外 在 数据 处 理 的 数据 。 叶 对 象 通常 只 包含 极 少 的 内 在 数据 ,所 以 很 容易 被 转化 为 
共享 资源 。 


13.5 示例 : 工具 提示 对 象 


在 JavaScript 对 象 需要 创建 HTML 内 容 这 种 情况 下 ， 享 元 模式 特别 有 用 。 那 种 会 生成 DOM 
元 素 的 对 象 如 果 数 目 众多 的 话 ， 会 占用 过 多 内 存 ， 使 网 页 陷入 泥沼 。 采 用 享 元 模式 后 ， 只 和 需 
创建 少许 这 种 对 象 即 可 ， 所 有 需要 这 种 对 象 的 地 方 都 可 以 共享 它们 。 工 具 提 示 就 是 一 个 典型 
的 例子 。 

工具 提示 就 是 在 桌面 应 用 程序 中 把 鼠标 指针 移 到 工具 图 标 上 时 出 现 的 那 种 浮动 文本 框 。 它 提 
供 了 一 些 说 明 信 息 , 这 样 用 户 不 用 点 击 工具 图 标 也 能 知道 其 用 途 。 这 在 Web 应 用 程序 中 非常 有 用 ， 
也 很 容易 用 JavaScript 实 现 。 


13.5.1 未 经 优化 的 Tooltip 类 
先 看 看 未 使 用 享 元 模式 的 Tooltip 类 : 


/* Tooltip class, un-optimized. */ 


var Tooltip = function(targetElement, text) { 
this.target = targetElement; 
this.text = text; 
this.delayTimeout = null; 
this.delay = 1500; // in milliseconds. 


// Create the HTML. 
this.element = document.createElement('div'); 
this.element.style.display = ‘none’; 
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this.element.style.position = 'absolute'; 

this.element.className = ‘tooltip'; 

document .getE lementsByTagName(' body’ )[0].appendChild(this.element) ; 
this.element.innerHTML = this.text; 


// Attach the events. 
var that = this; // Correcting the scope. 
addEvent(this.target, ‘mouseover’, function(e) { that.startDelay(e); }); 
addEvent(this.target, 'mouseout’, function(e) { that.hide(); }); 
}; | 
Tooltip.prototype = { 
startDelay: function(e) { 
if(this.delayTimeout == null) { 
var that = this; 
var x = e.clientx; 
var y = e.clientY; 
this.delayTimeout = setTimeout(function() { 
that.show(x, y); 
}, this.delay); 
} 
b 
show: function(x, y) { 
clearTimeout(this.delayTimeout) ; 
this.delayTimeout = null; 
this.element.style. left = x + 'px'; 
this.element.style.top = (y + 20) + ‘px’; 
this.element.style.display = ‘block’; 
}, 
hide: function() { 
clearTimeout(this.delayTimeout) ; 
this.delayTimeout = null; 
this.element.style.display = ‘none’; 


}; 

Tooltip 类 的 构造 函数 为 nouseover 和 mouseout 事 件 注册 了 事件 监听 器 。 这 里 有 一 个 问题 ， 这 
些 事件 监听 器 通常 是 作为 触发 事件 的 HTML 元 素 的 方法 执行 的 ， 这 意味 着 其 中 的 this 关 键 字 指 向 
的 是 该 元 素 而 不 是 那个 Tooltip 对 象 ?， 因 此 startDelay 和 hide 方 法 是 不 能 通过 this 关 键 字 访 问 到 
的 。 为 了 解决 这 个 问题 , 我 们 机 了 点 小 花招 , 具体 做 法 是 声明 一 个 名 为 that 的 新 变量 , 然后 把 this 
赋 给 它 。that 是 一 个 普通 变量 ， 它 不 会 因 事件 监听 器 是 否 作 为 HTML 元 素 的 方法 调用 而 变 ， 所 以 
我 们 可 以 通过 它 调 用 Tooltip 的 方法 。 


O 用 传统 的 方法 ( 即 设置 HTML 元 素 的 onmouseover 和 onmouseout 等 属性 ) 添加 的 事件 处 理 器 ， 都 是 作为 HTML 元素 
的 方法 调用 的 。 用 DOM 事 件 模 型 中 的 addEventListener 方 法 添加 的 事件 处 理 器 , 通常 也 是 作为 HTML 元 素 的 方法 
调用 的 (不 过 DOM 标 准 并 没有 对 此 做 出 规定 )。 但 是 用 正事 件 模 型 中 的 attachEvent 方 法 添加 的 事件 处 理 器 却 是 
作为 全 局 函数 调用 的 , 所 以 此 时 事件 处 理 器 中 的 this 关 键 字 不 是 指向 引发 事件 的 HTML 元 素 , 而 是 指向 全 局 对 象 ， 
也 即 window 所 指 的 那个 对 象 。 一 一 译 者 注 
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这 个 类 的 用 法 很 简单 。 只 管 创建 其 实例 ， 并 把 网 页 上 的 某 个 元 素 的 引用 和 想 要 显示 的 文 
字 传 递 给 它 的 构造 函数 就 行 。 这 里 使 用 了 $ 函 数 , 它 可 以 根据 一 个 元 素 的 ID 值 获取 对 元 素 的 引 
用 : 

/* Tooltip usage. */ 


var linkElement = $('link-id'); 
var tt = new Tooltip(linkElement, "Lorem ipsum. ..'); 


但 是 ,如果 网 页 上 有 几 百 个 甚至 几 千 个 元 素 需要 用 到 工具 提示 ， 那 会 出 现 什么 情况 呢 ? 这 意 
味 着 将 会 出 现成 百 上 千 个 Tooltip 类 的 实例 ， 它 们 每 个 都 有 自己 的 属性 、DOM 元 素 和 样式 。 这 是 
非常 低 效 的 。 

既然 工具 提示 一 次 只 能 显示 一 个 , 那么 为 每 一 个 工具 提示 对 象 创建 一 份 HTML 内 容 并 没有 意 
义 。 如 果 把 Tooltip 对 象 实现 为 享 元 ， 那 么 它 只 要 有 一 个 实例 就 行 ， 可 以 让 管理 器 对 象 把 要 显示 
的 文字 作为 外 在 数据 提供 给 它 的 方法 。 


13.5.2 ”作为 享 元 的 Tooltip 


把 Tooltip 类 转化 为 享 元 需要 做 三 件 事 : 把 外 在 数据 从 Too1tip 对 象 中 删除 ， 创 建 一 个 用 来 实 
例 化 Tooltip 的 工厂 ; 创建 一 个 用 来 保存 外 在 数据 的 管理 器 。 在 这 个 例子 中 我 们 还 可 以 发 挥 一 点 
创造 性 ， 用 一 个 单 体 同时 扮演 工厂 和 管理 器 的 角色 。 此 外 ， 由 于 外 在 数据 可 以 作为 事件 监听 器 的 
一 部 分 保存 ， 因 此 没有 必要 使 用 一 个 中 心 数据 库 。 

首先 是 把 外 在 数据 从 Tooltip 类 中 删除 : 


/* Tooltip class, as a flyweight. */ 


var Tooltip = function() { 
this.delayTimeout = null; 
this.delay = 1500; // in milliseconds. 


// Create the HTML. 

this.element = document.createElement('div'); 
this.element.style.display = 'none'; 

this.element.style.position = ‘absolute’; 

this.element.className = ‘tooltip'; 

document .getE lementsByTagName( ‘body’ )[0].appendChild(this.element); 


Rm 
Tooltip.prototype = { 
startDelay: function(e, text) { 
if(this.delayTimeout == null) { 
var that = this; 
var x = e.clientXx; 
var y = e.clientY; 
this.delayTimeout = setTimeout(function() { 
that.show(x, y, text); 

}, this.delay); 
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} 

b 

show: function(x, y, text) { 
clearTimeout(this.delayTimeout) ; 
this.delayTimeout = null; 
this.element.innerHTML = text; 
this.element.style.left = x + 'px'; 
this.element.style.top = (y + 20) + ‘px’; 
this.element.style.display = ‘block’; 

}, 

hide: function() { 
clearTimeout(this.delayTimeout) ; 
this.delayTimeout = null; 
this.element.style.display = ‘none’; 

} 

}; 


上 面 的 Tooltip 类 删除 了 原来 的 构造 函数 的 所 有 参数 以 及 注册 事件 处 理 器 的 代码 。 而 
startDelay 和 show 方 法 则 各 增加 了 一 个 新 的 参数 ， 这 样 一 来 ， 要 显示 的 文字 就 可 以 作为 外 在 数据 


传 给 它们 。 
下 一 步 是 创建 用 作 工 厂 和 管理 器 的 那个 单 体 。 我 们 把 Tooltip 类 的 声明 放 在 TooltipManager 
这 个 单 体 中 ， 这 样 它 就 不 能 在 别 的 地 方 被 实例 化 : 


/* TooltipManager singleton, a flyweight factory and manager. */ 


var TooltipManager = (function() { 
var storedInstance = null; 


/* Tooltip class, as a flyweight. */ 
var Tooltip = function() { 


J; 
Tooltip.prototype = { 


}; 


return { 
addTooltip: function(targetElement, text) { 
// Get the tooltip object. 
var tt = this.getTooltip(); 
// Attach the events. 
addEvent(targetElement, ‘mouseover’, function(e) { tt.startDelay(e, text); }); 
addEvent(targetElement, ‘mouseout', function(e) { tt.hide(); }); 
}, 
getTooltip: function() { 
if(storedInstance == null) { 
storedInstance = new Tooltip(); 


} 


www.TopSage.com 


13.6 保存 实例 供 以 后 重用 175 
df las et cel 
return storedInstance; 
}; 

HO; 

这 个 单 体 有 两 个 方法 ， 分 别 体现 了 它 的 两 种 角色 。getTooltip 是 工厂 方法 ， 它 与 你 之 前 见 到 
过 的 其 他 享 元 的 生成 方法 差不多 。addTooltip 则 是 管理 器 方法 ， 它 先 获取 一 个 Tooltip 对 象 ， 然 后 
分 别 把 两 个 匿名 函数 注册 为 目标 元 素 的 mouseover 和 mouseout 事 件 监听 器 。 这 个 例子 用 不 着 创建 中 
心 数据 库 ， 因 为 那 两 个 匿名 函数 中 生成 的 闭 包 已 经 保存 了 外 在 数据 。 

现在 创建 工具 提示 的 代码 看 起 来 与 之 前 的 有 点 不 一 样 。 在 这 里 应 该 调用 addTooltip 方 法 ， 而 
不 是 实例 化 Tooltip: 


/* Tooltip usage. */ 


TooltipManager.addTooltip($('link-id'), ‘Lorem ipsum...'); 


把 Tooltip 转 化 为 享 元 的 收获 何在 ? 现在 需要 生成 的 DOM 元 素 已 减 至 一 个 。 这 很 重要 。 假 如 
你 想 为 工具 提示 添加 阴影 或 iframe 垫 片 〈iframe shim) 8 等 特性 ， 那 么 每 个 Tooltip 对 象 需要 生成 5 
到 10 个 DOM 元 素 。 要 是 不 把 它 实现 为 享 元 的 话 ， 网 页 将 被 成 百 上 千 个 工具 提示 压 垮 。 此 外 ， 享 
元 模式 的 应 用 还 减少 了 对 象 内 部 保存 的 数据 。 有 了 这 两 点 改进 , 现在 你 想 创建 多 少 工具 提示 都 行 
(当然 ， 要 在 合理 的 范围 内 )， 用 不 着 担心 为 此 会 冒 出 几 千 个 挤 来 挤 去 的 Too1tip 实 例 。 


13.6 保存 实例 供 以 后 重用 


模式 对 话 框 是 享 元 模式 的 另 一 个 适用 场合 。 与 工具 提示 一 样 ， 对 话 框 对 象 也 封装 着 数据 和 
HTML 内 容 。 不 过 ， 后 者 包含 的 DOM 元 素 要 多 得 多 ， 因 此 尽 可 能 地 减少 其 实例 个 数 更 显 重要 。 问 
题 在 于 网 页 上 可 能 会 同时 出 现 不 止 一 个 对 话 框 。 实 际 上 ， 你 无 法 确切 知道 究竟 需要 多 少 对 话 框 。 
既然 如 此 ， 那 又 怎 能 得 知 需要 用 到 多 少 实例 呢 ? 

因为 运行 期 间 需 要 用 到 的 实例 的 确切 数目 无 法 在 开发 期 间 确定 , 所 以 不 能 对 实例 的 个 数 加 以 
限制 ， 而 只 能 要 用 多 少 就 创建 多 少 ， 然 后 把 它们 保存 起 来 供 以 后 使 用 。 这 样 就 不 用 再 次 承受 其 创 
建 过 程 中 的 开销 ， 而 且 所 创建 的 实例 的 数目 也 刚好 能 满足 需要 。 

在 这 个 示例 中 ，DialogBox 对 象 的 实现 细节 并 不 重要 。 你 只 需要 知道 ， 它 是 资源 密集 型 的 对 
象 ， 应 该 尽量 少 实例 化 。 该 类 的 基本 框架 以 及 它 实现 的 接口 如 下 所 示 : 


© iframe 垫 片 是 一 种 用 来 解决 正中 的 窗口 化 控件 (windowed control) 带 来 的 问题 的 偏 招 。 IE 7 之 前 的 下 中 的 select 和 
IE 5.5 之 前 的 IE 中 的 iframe 都 是 所 谓 窗口 化 控件 ，CSS 属 性 z-index 对 它们 不 起 作用 。 即使 把 一 个 绝对 定位 的 而 且 不 
透明 的 HTML 元 素 定位 到 窗口 化 控件 前 方 ， 这 种 控件 也 会 穿 透 该 HTML 元 素 显 示 出 来 。 这 给 Web 前 端 开 发 中 菜单 
和 对 话 框 的 实现 造成 了 很 大 的 麻烦 。 好 在 从 IE 5.5 开 始 iframe 就 不 再 是 窗口 化 控件 ， 而 且 它 还 有 一 个 不 同 于 其 他 元 
素 的 特点 ， 那 就 是 它 能 遮 住 其 后 方 的 窗口 化 控件 。 因 此 在 IE 5.5 和 IE 6 中 ， 在 需要 把 一 个 HTML 元 素 〈 比 如 div) 
定位 到 窗口 化 控件 前 方 时 ， 可 以 把 一 个 与 该 元 素 大 小 相同 的 iframe 定 位 到 同样 的 位 置 ,并 且 让 其 在 z 轴 上 位 于 那个 
HTML 元 素 后 方 。 这 样 一 来 ，iframe 可 以 遮 住 后 方 的 窗口 化 控件 ， 而 它 本 身 又 会 被 那个 HTML 元 素 遮 住 ， 从 效果 
上 看 就 像 是 那个 HTML 元 素 遮 住 了 后 方 的 窗口 化 控件 一 样 。 这 种 iframe 就 称 为 iframe 垫 片 。 一 — 译 者 注 
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/* DisplayModule interface. */ 

var DisplayModule = new Interface('DisplayModule', ['show', ‘hide’, 'state']); 
/* DialogBox class. */ 

var DialogBox = function() { // implements DisplayModule 

ats 

DialogBox.prototype = { 


show: function(header, body, footer) { // Sets the content and shows the 
// dialog box. 


}, 
hide: function() { // Hides the dialog box. 
js 
state: function() { // Returns ‘visible’ or 'hidden'. 
} 
}; 


该 类 实现 了 DisplayModule 接 口中 定义 的 3 个 方法 (show、hide 和 save)， 这 里 并 不 关心 其 具体 
实现 。 本 例 的 重点 在 于 那个 控制 享 元 数量 的 管理 器 。 该 管理 器 需要 3 个 部 件 ， 一 个 用 来 显示 对 话 
框 的 方法 、 一 个 用 来 检查 当前 网 页 上 正在 使 用 的 对 话 框 的 数目 的 方法 ， 以 及 一 个 用 来 保存 所 生成 
的 对 话 框 的 数据 结构 。 我 们 用 一 个 单 体 来 包装 这 些 部 件 ， 以 确保 管理 器 的 唯一 性 ?: 


/* DialogBoxManager singleton. */ 


var DialogBoxManager = (function() { 
var created = []; // Stores created instances. 


return { 
displayDialogBox: function(header, body, footer) { 
var inUse = this.numberInUse(); // Find the number currently in use. 
if(inUse > created. length) { 
created.push(this.createDialogBox()); // Augment it if need be. 


created[inUse].show(header, body, footer); // Show the dialog box. 


createDialogBox: function() { // Factory method. 
var db = new DialogBox(); 
return db; 


}, 
numberInUse: function() { 
var inUse = 0; 


O 这 段 代 码 有 一 些 问题 。 首 先 ， 第 7 行 那 个 if 语 句 的 判别 条 件 应 该 从 “inUse > created. length” 2% “inUse > 
= created.1ength”。 其 次 ， 即 便 已 经 改正 了 前 面 的 错误 ，disp1layDialogBox 这 个 方法 的 逻辑 仍然 不 正确 。 它 应 
该 逐一 检查 数组 的 各 个 元 素 , 用 遇 到 的 第 一 个 当前 未 被 使 用 的 对 话 框 来 显示 给 定 内容 。 如 果 所 有 对 话 框 都 正 被 使 
用 ， 那 么 再 新 创建 一 个 对 话 框 对 象 ， 把 它 添加 到 数组 的 最 后 ， 然 后 用 这 个 新 对 象 显示 给 定 内 容 。 一 一 译 者 注 
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for(var i = 0, len = created.length; i < len; i++) { 
if(created[i].state() === 'visible') { 
inUse++; 
} 
} 


return inUse; 


} 
}; 
NOs 
这 个 管理 器 把 已 经 创建 出 来 的 对 话 框 对 象 保存 在 数组 created 中 ， 以 便于 重用 。numberInUse 
方法 用 于 获取 现 有 DialogBox 对 象 中 当前 正 被 使 用 的 对 象 的 个 数 ， 它 通过 检查 DialogBox 对 象 的 状 
态 判断 其 是 否 正 被 使 用 。displayDialogBox 方 法 会 先 检查 这 个 数字 是 否 不 小 于 数组 的 长 度 ， 并 且 
只 有 在 不 能 重用 现 有 实例 的 情况 下 才 创 建新 实例 。 
这 个 示例 比 工具 提示 那个 要 复杂 一 点 , 但 它们 的 工作 原理 是 相同 的 。 总 结 起 来 就 是 : 通过 把 
外 在 数据 从 资源 密集 型 对 象 剥离 以 实现 对 这 种 对 象 的 重用 ; 用 一 个 管理 器 控制 对 象 的 个 数 并 保存 
外 在 数据 所 生成 的 实例 的 个 数 应 该 刚好 够 用 ， 并 且 在 实例 化 开销 较 大 的 情况 下 ， 这 些 实例 应 被 
保存 起 来 供 以 后 重用 。 这 种 技术 类 似 于 服务 端 语言 中 的 SQL 连 接 池 ， 在 后 一 种 技术 中 ， 仅 当 现 有 
连接 都 在 使 用 当中 时 才 会 创建 新 连接 。 


13.7 ” 享 元 模式 的 适用 场合 


要 想 把 对 象 转化 为 享 元 需要 满足 一 些 前 提 条 件 。 最 重要 的 一 个 条 件 就 是 , 网 页 中 必须 使 用 了 
大 量 资源 密集 型 对 象 。 如 果 只 会 用 到 少许 这 类 对 象 ， 那 么 这 种 优化 并 不 划算 。 那 么 “大 量 ” 到底 
有 多 大 ? 实际 上 浏览 器 内 存 和 CPU 的 使 用 率 都 会 制约 你 所 能 创建 的 对 象 的 数量 。 只 要 对 象 的 数目 
已 经 多 到 开始 引起 这 方面 的 问题 ， 那 就 足以 应 用 享 元 模式 了 。 

第 二 个 条 件 是 这 些 对 象 中 所 保存 的 数据 至 少 有 一 部 分 能 被 转化 为 外 在 数据 。 这 就 是 说 必须 
能 够 把 存储 在 对 象 内 部 的 部 分 数据 分 离 出 来 ， 然 后 将 其 作为 参数 提供 给 各 个 方法 。 此 外 ， 将 这 
些 数 据 存储 在 对 象 外 部 所 占用 的 资源 应 该 相对 较 少 ， 否 则 这 种 做 法 对 于 性 能 的 提升 实际 上 毫 无 
意义 。 那 些 包 含 着 大 量 基础 性 代码 (infrastructure code) 和 HTML 内 容 的 对 象 可 能 比较 适合 这 
种 优化 。 如 果 一 个 对 象 只 不 过 是 一 些 数据 和 访问 这 些 数据 的 方法 的 容器 ， 那 么 结论 就 不 是 那么 
回 事 了 。 

最 后 一 个 条 件 是 ， 将 外 在 数据 分 离 出 去 之 后 ， 独 一 无 二 的 对 象 的 数目 相对 较 少 。 最 理想 的 情 
况 是 只 存在 一 个 独一无二 的 对 象 ， 比 如 日 历 和 工具 提示 那 两 个 示例 。 尽 管 并 非 什么 时 候 都 能 把 实 
例 数目 削减 到 一 个 , 但 是 应 该 尽量 减少 独一无二 的 对 象 的 个 数 。 在 每 一 个 这 种 独 一 无 三 的 对 象 都 
需要 有 多 个 副本 的 情况 下 (比如 对 话 框 那个 例子 )， 这 尤其 重要 。 


13.8 ”实现 享 元 模式 的 一 般 步 又 


能 满足 上 述 三 个 条 件 的 程序 就 适合 用 享 元 模式 进行 优化 。 几乎 所 有 的 享 元 都 是 按 同 样 的 步骤 
实现 的 。 


www.TopSage.com 


178 第 13 章 FAH 模式 


(1) 将 所 有 外 在 数据 从 目标 类 剥离 。 具 体 做 法 是 尽 可 能 多 地 删除 该 类 的 属性 ， 所 删除 的 应 该 
是 那 种 因 实例 而 异 的 属性 。 构造 函数 的 参数 也 要 这 样 处 理 。 这 些 参数 应 该 被 添加 到 该 类 的 各 个 方 
法 。 这 些 外 在 数据 现在 不 再 保存 在 类 的 内 部 , 而 是 由 管理 器 提供 给 类 的 方法 。 经 过 这 样 的 处 理 后 ， 
目标 类 应 该 依然 具有 与 之 前 一 样 的 功能 。 唯 一 的 区 别 在 于 数据 的 来 源 发 生 了 变化 。 

(2) 创建 一 个 用 来 控制 该 类 的 实例 化 的 工厂 。 这 个 工厂 应 该 掌握 该 类 所 有 已 创建 出 来 的 独 
一 无 二 的 实例 。 其 具体 做 法 之 一 是 用 一 个 对 象 字面 量 ? 来 保存 每 一 个 这 类 对 象 的 引用 ， 并 以 用 
来 生成 这 些 对 象 的 参数 的 唯一 性 组 合作 为 它们 的 索引 。 这 样 一 来 ， 每 次 要 求 工厂 提供 一 个 对 象 
时 ， 它 会 先 检查 那个 对 象 字面 量 ， 看 看 以 前 是 否 请 求 过 这 个 对 象 。 如 果 是 ， 那 么 只 要 返回 那个 
现 有 对 象 的 引用 就 行 。 否 则 它 会 创建 一 个 新 对 象 并 将 其 引用 保存 在 那个 对 象 字面 量 中 ， 然 后 返 
回 这 个 对 象 。 另 一 种 做 法 称 为 对 象 池 〈pooling)， 这 种 技术 用 数组 来 保存 所 创建 的 对 象 的 引用 。 
它 适 合 于 注重 可 用 对 象 的 数量 而 不 是 那些 单独 配置 的 实例 Cuniquely configured instance) 的 场 
合 。 这 种 技术 可 用 来 将 所 实例 化 的 对 象 的 数目 维持 在 最 低 值 。 工 厂 会 处 理 根据 内 在 数据 创建 对 
象 的 所 有 事宜 

(3) 创建 一 个 用 来 保存 外 在 数据 的 管理 器 。 该 管理 器 对 象 负责 控制 处 理 外 在 数据 的 种 种 事宜 。 
在 实施 优化 之 前 ， 要 是 需要 一 个 目标 类 的 实例 ， 你 会 把 所 有 数据 传 给 构造 函数 以 创建 其 新 实例 。 
而 现在 要 是 需要 一 个 实例 ， 你 会 调用 管理 器 的 某 个 方法 ， 把 所 有 数据 都 提供 给 它 。 这 个 方法 会 分 
辩 内 在 数据 和 外 在 数据 。 它 把 内 在 数据 提供 给 工厂 对 象 以 创建 一 个 对 象 (或 者 ， 如 果 已 经 存在 这 
样 一 个 对 象 的 话 ， 则 重用 该 对 象 )。 外 在 数据 则 被 保存 在 管理 器 内 的 一 个 数据 结构 中 。 管 理 器 随 
后 会 根据 需要 将 这 些 数据 提供 给 共享 对 象 的 方法 ， 其 效果 就 如 同 该 类 有 许多 实例 一 样 。 


13.9 ” 享 元 模式 之 利 


享 元 模式 可 以 把 网 页 的 资源 负荷 降低 几 个 数量 级 。 在 工具 提示 那个 示例 中 , Too1tip 对 象 ( 以 
及 它 所 生成 的 HTML 元 素 ) 的 数量 被 前 减 至 一 个 。 如 果 网 页 使 用 了 成 百 上 千 个 工具 提示 (对 于 桌 
面 风格 的 大 型 应 用 程序 来 说 这 很 常见 )， 那 么 所 能 节省 的 资源 相当 可 观 。 即 使 享 元 模式 的 应 用 无 
法 将 实例 的 个 数 前 减 到 一 个 ， 你 仍 能 从 中 获 益 不 少 。 \ 

实现 这 种 节省 并 不 需要 大 量 修改 原 有 代码 。 在 创建 了 管理 器 、 工 厂 和 享 元 之 后 ， 你 需要 对 代 
码 进行 的 修改 只 不 过 是 从 直接 实例 化 目标 类 改 为 调用 管理 器 对 象 的 某 个 方法 。 如果 你 创建 的 享 元 
是 其 他 程序 员 使 用 的 API， 那 么 他 们 只 要 稍稍 改变 自己 调用 API 的 方式 就 能 享受 到 享 元 带 来 的 好 
处 。 这 正 是 享 元 模式 出 色 的 地 方 。 你 只 要 优化 一 下 自己 的 API， 所 有 使 用 它 的 人 都 能 从 中 受益 。 
如 果 优 化 的 是 整个 网 站 中 都 在 使 用 的 一 个 库 ， 那 么 用 户 会 立即 体会 到 其 速度 的 显著 提升 。 


D 其 实在 这 一 段 中 作者 不 应 该 用 “对 象 字面 量 ” 这 个 词 ， 而 应 该 改 用 “对 象 "。 这 里 简单 解释 一 下 其 原因 。 在 语句 


“var obj = {};” 中 ， 所 谓 对 象 字面 量 其 实 只 是 “{}” 这 一 部 分 ， 它 只 是 一 个 值 。 相 比 之 下 ，obj 是 一 个 变量 。 
把 一 个 对 象 字 面 量 赋 给 它 ， 只 不 过 是 让 它 指向 系统 通过 解析 那个 对 象 字面 量 而 生成 的 对 象 而 已 ， 并 不 会 因此 就 把 
它 变 成 一 个 对 象 字面 量 。 以 后 为 obj 增 添 属性 时 ， 改 变 的 是 它 所 指 的 那个 对 象 ， 而 不 是 对 象 字 面 量 “{}”。 再 举 一 
例 。 在 C 语 句 “int n= 2;” 中 ，n 是 一 个 变量 ， 而 2 则 是 一 个 字面 量 。 这 条 语句 执行 之 后 n 的 值 为 2。 如 果 在 此 之 
后 再 执行 语句 “n = 3;”， 其 结果 是 把 变量 n 的 值 改 为 3， 而 不 是 把 程序 中 的 那个 字面 量 2 改 为 3。 一 一 译 者 注 
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享 元 模式 只 不 过 是 一 种 优化 模式 。 其 作用 是 在 满足 一 系列 严格 条 件 的 前 提 下 提高 代码 的 运行 
效率 。 它 不 是 什么 地 方 都 能 用 ， 也 不 应 该 被 到 处 乱用 。 如 果 把 它 用 在 不 必要 的 地 方 ， 其 结果 反而 
有 损 代 码 的 运行 效率 。 这 种 模式 在 优化 代码 的 同时 ， 也 提高 了 其 复杂 程度 ， 这 会 给 调试 和 维护 造 
成 困难 。 

它 之 所 以 会 妨碍 调试 ， 是 因为 现在 可 能 出 错 的 地 方 变 成 了 3 个 : 管理 器 、 工 厂 和 享 元 。 相 比 
之 下 ， 先 前 需要 操心 的 只 有 一 个 对 象 。 而 且 现在 追踪 数据 问题 也 很 困难 ， 因 为 数据 的 来 源 并 不 总 
是 很 清楚 。 如 果 工 具 提示 显示 的 文字 不 正确 ,那么 其 原因 究竟 是 传 入 的 文字 不 正确 ， 还 是 工具 提 
示 这 个 共享 资源 没有 清除 上 次 使 用 的 文字 呢 ? 这 些 类 型 的 错误 可 能 会 造成 很 大 的 麻烦 。 

这 种 优化 也 会 使 维护 变 得 更 加 困难 。 现 在 你 面 对 的 不 是 由 封装 着 数据 的 对 象 构成 的 清晰 的 架 
构 ， 而 是 一 堆 又 碎 又 乱 的 东西 ， 其 中 的 数据 至 少 分 两 处 保存 。 你 最 好 对 一 份 数据 是 内 在 数据 或 外 
在 数据 的 原因 加 以 注 明 ， 因 为 以 后 负责 维护 代码 的 人 对 此 可 能 并 不 清楚 。 

这 些 缺 点 并 非 洪水 猛兽 ,它们 的 存在 只 是 表明 只 有 在 必要 的 时 候 才 应 该 进行 这 种 优化 。 你 必 
须 在 运行 效率 和 可 维护 性 之 间 进 行 权衡 ， 然 而 这 种 权衡 正 是 工程 学 的 精 复 所 在 。 既 然 如 此 ， 要 是 
拿 不 准 是 否 需要 使 用 享 元 模式 ， 那 么 你 很 可 能 并 不 需要 它 。 享 元 模式 适合 的 是 系统 资源 已 经 用 得 
差不多 而 且 明 显 需要 进行 某 种 优化 这 样 一 类 场合 。 这 正 是 其 利 大 于 弊 的 时 候 。 


13.11 h% 


本 章 讨 论 了 享 元 模式 的 结构 、 用 法 和 益处 。 这 纯粹 是 一 种 优化 模式 ， 目 的 在 于 提高 系统 的 性 
能 和 代码 的 效率 一 一 尤其 是 使 用 内 存 的 效率 。 其 实现 手法 是 , 将 所 有 可 保存 在 外 部 的 数据 从 一 个 
现 有 的 类 中 剥离 ， 这 样 一 来 ， 该 类 的 每 一 个 独一无二 的 实例 就 成 为 可 在 多 处 共享 的 资源 。 一 个 享 
元 对 象 足以 替代 原来 的 多 个 对 象 。 

要 想像 这 样 共用 享 元 对 象 ， 必 须 添加 一 些 新 对 象 。 其 中 包括 一 个 工厂 对 象 。 它 负责 控制 目标 
类 的 实例 化 ， 并 且 把 实例 的 数目 限制 在 刚好 够 用 的 范围 。 它 还 应 该 把 先前 创建 的 实例 保存 起 来 ， 
以 便 以 后 要 用 到 同样 的 对 象 时 进行 重用 。 需 要 添加 的 还 包括 一 个 管理 器 对 象 。 它 负责 保存 外 在 数 
据 并 将 其 提供 给 享 元 的 方法 。 这 样 既 能 保留 目标 类 的 原 有 功能 ， 又 能 大 幅 前 减 所 需 对 象 的 数量 。 

如 果 运 用 得 当 ， 那 么 享 元 模式 可 以 显著 提高 系统 性 能 ， 并 且 大 幅 减 少 所 需 资源 。 否 则 ， 它 只 
会 让 代码 变 得 更 加 复杂 、 更 难 调试 和 维护 ， 即 便 有 点 性 能 提高 ， 也 不 足以 补偿 这 些 负面 作用 。 在 
使 用 这 种 模式 之 前 ， 必 须 确保 你 的 程序 满足 必要 的 条 件 ， 而 且 确 保 这 样 做 在 性 能 上 的 收获 能 够 超 
过 在 代码 复杂 程度 上 付出 的 代价 。 

这 种 模式 对 JavaScript 程 序 员 特别 有 用 ， 因 为 它 可 以 用 来 减少 网 页 上 所 要 使 用 的 DOM 元 素 的 
数量 ， 要 知道 这 些 元 素 需 要 耗费 许多 内 存 。 结 合 使 用 这 种 模式 与 组 合 模式 等 组 织 型 模式 可 以 开发 
出 功能 丰富 的 复杂 Web 应 用 系统 ， 它 们 可 以 平稳 地 运行 在 任何 现代 JavaScript 环 境 中 。 


www.TopSage.com 


— 


第 14 章 





代理 模式 





章 讨 论 的 是 代理 模式 。 代理 (proxy) 是 一 个 对 象 , 它 可 以 用 来 控制 对 另 一 对 象 的 访问 。 

它 与 另外 那个 对 象 实现 了 同样 的 接口 ， 并 且 会 把 任何 方法 调用 传递 给 那个 对 象 。 另 外 
那个 对 象 通常 称 为 本 体 〈real subject)。 代 理 可 以 代替 其 本 体 被 实例 化 ， 并 使 其 可 被 远程 访问 。 它 
还 可 以 把 本 体 的 实例 化 推迟 到 真正 需要 的 时 候 ， 对 于 实例 化 比较 费时 的 本 体 ， 或 者 因 尺 寸 较 大 以 
至 于 不 用 时 不 宜 保 存在 内 存 中 的 本 体 ， 这 特别 有 用 。 在 处 理 那 些 需 要 较 长 时 间 才 能 把 数据 载 入 用 
户 界面 的 类 时 ， 代 理 也 大 有 神 益 。 


14.1 代理 的 结构 


代理 模式 最 基本 的 形式 是 对 访问 进行 控制 。 代 理 对 象 和 另 一 个 对 象 〈 本 体 ) 实现 的 是 同样 的 
接口 。 实 际 上 工作 还 是 本 体 在 做 ， 它 才 是 负责 执行 所 分 派 的 任务 的 那个 对 象 或 类 。 代 理 对 象 所 做 
的 不 外 乎 节制 对 本 体 的 访问 。 要 注意 ， 代 理 对 象 并 不 会 在 另 一 对 象 的 基础 上 添加 方法 或 修改 其 方 
法 (就 像 装 饰 者 那样 )， 也 不 会 简化 那个 对 象 的 接口 (就 像 门面 元 素 那样 )。 它 实现 的 接口 与 本 体 
完全 相同 ， 所 有 对 它 进 行 的 方法 调用 都 会 被 传递 给 本 体 。 


14.1.1 代理 如 何 控制 对 本 体 的 访问 


那 种 根本 不 实现 任何 访问 控制 的 代理 最 简单 。 它 所 做 的 只 是 把 所 有 方法 调用 传递 到 本 体 。 这 
种 代理 毫 无 用 处 ， 但 它 也 可 提供 一 个 进一步 发 展 的 基础 。 

在 下 面 的 例子 中 ， 我 们 将 创建 一 个 代表 图 书馆 的 类 。 该 类 封装 了 一 个 Book 对 象 (定义 见 第 3 
章 ) Ax: 


/* From chapter 3. */ 

var Publication = new Interface('Publication', ['getIsbn', 'setIsbn', ‘getTitle', 
‘setTitle', ‘getAuthor', ‘setAuthor'’, ‘display']); 

var Book = function(isbn, title, author) { ... } // implements Publication 


/* Library interface. */ 


var Library = new Interface('Library’, ['findBooks', ‘checkoutBook', ‘returnBook']); 
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/* PublicLibrary class. */ 


var PublicLibrary = function(books) { // implements Library 
this.catalog = {}; 
for(var i = 0, len = books.length; i < len; i++) { 
this.catalog[books[i].getIsbn()] = { book: books[i], available: true }; 
} 
}; 
PublicLibrary.prototype = { 
findBooks: function(searchString) { 
var results = []; 
for(var isbn in this.catalog) { 
if(!this.catalog.hasOwnProperty(isbn)) continue; 
if(searchString.match(this.catalog[isbn].getTitle()) || 
searchString.match(this.catalog[isbn].getAuthor())) { 
results.push(this.catalog[isbn]); 
} 
} 
return results; 
b 
checkoutBook: function(book) { 
var isbn = book.getIsbn(); 
if(this.catalog[isbn]) { 
if(this.catalog[isbn].available) { 
this.catalog[isbn].available = false; 
return this.catalog[isbn]; 
} 
else { 
throw new Error('PublicLibrary: book ' + book.getTitle() + 
' is not currently available. '); 
} 


else { 
throw new Error('PublicLibrary: book ' + book.getTitle() + ' not found. '); 
} 
}, 
returnBook: function(book) { 
var isbn = book.getIsbn(); 
if(this.catalog[isbn]) { 
this.catalog[isbn].available = true; 
} 
else { 
throw new Error('PublicLibrary: book ' + book.getTitle() + ' not found.'); 
} 
} 
}; 


这 个 类 非常 简单 。 它 可 以 用 来 查 书 、 借 书 和 还 书 。 下 面 是 一 个 没有 实现 任何 访问 控制 的 
PublicLibrary 类 的 代理 : 
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/* PublicLibraryProxy class, a useless proxy. */ 


var PubliclibraryProxy = function(catalog) { // implements Library 
this.library = new PublicLibrary(catalog); 
}; 
PublicLibraryProxy.prototype = { 
findBooks: function(searchString) { 
return this.library.findBooks(searchString) ; 


}, 
checkoutBook: function(book) { 
return this. library.checkoutBook(book) ; 


b 
returnBook: function(book) { 
return this.library.returnBook(book); 


} 

}; 

PublicLibraryProxy 与 Pub1icLibrary 实 现 了 同样 的 接口 和 同一 批 方法 。 这 个 类 在 实例 化 时 会 
创建 一 个 PublicLibrary 实 例 并 将 其 作为 属性 保存 。 如 果 调 用 该 类 的 某 个 方法 ， 它 会 通过 这 个 属 
性 在 其 PublicLibrary 实 例 上 调用 同名 方法 。 这 种 类 型 的 代理 也 可 以 通过 检查 本 体 的 接口 并 为 每 
一 个 方法 创建 对 应 方法 这 样 一 种 方式 动态 地 创建 。 这 与 第 12 章 中 创建 具有 动态 接口 的 装饰 者 的 方 
式 类 似 。 

前 面 已 经 说 过 ， 这 种 类 型 的 代理 没有 什么 用 处 。 在 各 种 类 型 的 代理 中 ， 虚 拟人 代理 (virtual 
proxy) 是 最 有 用 的 类 型 之 一 。 虚 拟 代理 用 于 控制 对 那 种 创建 开销 很 大 的 本 体 的 访问 。 它 会 把 本 
体 的 实例 化 推迟 到 有 方法 被 调用 的 时 候 ， 有 时 还 会 提供 关于 实例 化 状态 的 反馈 。 它 还 可 以 在 本 体 
被 加 载 之 前 扮演 其 替身 的 角色 。 作 为 一 个 例子 ， 假 设 Pub1icLibrary 的 实例 化 很 慢 ， 不 能 在 网 页 
加 载 的 时 候 立 即 完成 。 我 们 可 以 为 其 创建 一 个 虚拟 代理 ， 让 它 把 Pub1licLibrary 的 实例 化 推迟 到 
必要 的 时 候 : 


/* PublicLibraryVirtualProxy class. */ 


var PublicLibraryVirtualProxy = function(catalog) { // implements Library 
this. library = null; 
this.catalog = catalog; // Store the argument to the constructor. 
}; 
PubliclLibraryVirtualProxy.prototype = { 
_initializeLibrary: function() { 
if(this.library === null) { 
this.library = new PublicLibrary(this.catalog); 
} 
}, 
findBooks: function(searchString) { 
this._initializeLibrary(); 
return this. library. findBooks(searchString) ; 


2 
checkoutBook: function(book) { 
this. _initializeLibrary(); 
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return this. library.checkoutBook(book) ; 


wet function(book) { 
this. initializeLibrary(); 
return this. library.returnBook(book) ; 
} 
}; 
publicLibraryProxy 和 PublicLibraryVirtualProxy 之 间 的 关键 区 别 在 于 后 者 不 会 立即 创建 
publicLibrary 的 实例 。PublicLibraryVirtualProxy 会 把 构造 函数 的 参数 保存 起 来 ， 直 到 有 方法 
被 调用 时 才 真 正 执行 本 体 的 实例 化 。 这 样 一 来 ， 如 果 图 书馆 对 象 一 直 未 被 用 到 ， 那 么 它 就 不 会 
被 创建 出 来 。 虚 拟 代理 通常 具有 某 种 能 触发 本 体 的 实例 化 的 事件 。 在 本 例 中 ， 方 法 调用 就 是 触 
发 因素 。 


14.1.2 ”虚拟 代理 、 远 程 代理 和 保护 代理 


对 于 JavaScript 程 序 员 来 说 , 虚拟 代理 可 能 是 最 有 用 的 代理 类 型 。 下面 我 们 简要 介绍 一 下 其 他 
代理 类 型 ， 并 说 明 为 什么 它们 对 JavaScript 编 程 不 那么 适用 。 

远程 代理 (remote proxy) 用 于 访问 位 于 另 一 个 环境 中 的 对 象 。 在 Java 中 ， 这 意味 着 另 一 个 
虚拟 机 中 的 对 象 ， 或 者 是 地 球 另 一 端的 某 台 计算 机 中 的 对 象 。 远 程 对 象 一 般 都 长 期 存在 ， 任 何 
时 候 都 可 以 从 任何 其 他 环境 中 进行 访问 。 这 种 类 型 的 代理 很 难 照搬 到 JavaScript 中 。 其 原因 有 两 
个 。 首先， 通常 JavaScript 运 行 时 环境 不 可 能 长 期 存在 。 大 多 数 JavaScript 环 境 都 委身 于 Web 浏 览 
器 ， 因 此 随 着 用 户 的 网 上 冲浪 活动 ， 通 常 每 过 几 分 钟 运行 时 环境 就 会 加 载 或 印 载 一 次 。 第 二 ， 
在 JavaScript 中 无 法 建立 到 另 一 个 运行 时 环境 的 套 接 字 连接 以 访问 其 变量 空间 , 即便 它 能 长 期 存 

i H 

ERREA AA HIT EEA 然后 用 Ajax 技术 将 结果 发 送 给 某 个 

远程 代理 的 一 种 更 有 可 能 的 用 途 是 控制 对 其 他 语言 中 的 本 体 的 访问 。 这 种 本 体 可 能 是 一 个 
Web 服 务 资源 ， 也 可 能 是 一 个 PHP 对 象 。 在 此 情况 下 ， 很 难说 你 所 用 的 究竟 是 什么 模式 。 它 既 可 
以 被 视 为 适配器 ， 也 可 以 被 视 为 远程 代理 。 因 为 这 是 一 个 灰色 地 带 ， 所 以 有 必要 为 这 种 模式 确定 
一 个 名 称 。 我 们 决定 选择 远程 代理 这 个 名 称 ， 原 因 在 于 这 个 名 称 更 具 说 明 性 ， 也 更 准确 ， 而 且 这 
里 所 说 的 模式 更 接近 于 代理 模式 而 不 是 适配器 模式 。 第 一 个 例子 中 对 此 有 更 多 的 讨论 ”。 

保护 代理 也 不 容易 照搬 到 JavaScript 中 。 在 其 他 语言 中 , 它 通 常用 来 根据 客户 的 身份 控制 对 特 
定 方法 的 访问 。 假 设 要 为 PublicLibrary 类 添加 一 些 用 来 增加 或 删除 目录 中 的 书 的 方法 。 在 Java 
中 你 会 用 一 个 保护 代理 来 限制 对 这 些 方法 的 访问 ， 它 只 允许 某 些 类 型 的 客户 (比如 图 书 管理 员 ) 
调用 这 些 方 法 , 而 其 他 类 型 的 客户 则 没有 这 样 的 权利 。 但 是 在 JavaScript 中 ， 你 无 法 判断 调用 方法 
的 客户 的 类 型 ， 因 此 也 就 不 可 能 实现 这 种 模式 。 

出 于 上 述 原 因 ， 本 章 集中 讨论 的 是 虚拟 代理 和 远程 代理 。 


@ 原文 为 “We discuss this distinction more in the first example”。 这 非常 令 人 困惑 ， 因 为 本 章 的 第 一 个 例子 与 此 无 关 。 
后 面 的 例子 也 没有 专门 讨论 这 方面 的 问题 。 一 一 译 者 注 
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14.1.3 ”代理 模式 与 装饰 者 模式 的 比较 


代理 在 许多 方面 都 很 像 装 饰 者 。 装 饰 者 和 虚拟 代理 都 要 对 其 他 对 象 进行 包装 ， 都 要 实现 与 被 
包装 对 象 相同 的 接口 ， 而 且 都 要 把 方法 调用 传递 给 被 包装 对 象 。 那 么 二 者 究竟 有 什么 区 别 呢 ? 

最 大 的 区 别 在 于 装饰 者 会 对 被 包装 对 象 的 功能 进行 修改 或 扩充 , 而 代理 只 不 过 是 控制 对 它 的 
访问 。 除 了 有 时 可 能 会 添加 一 些 控制 代码 之 外 ， 代 理 并 不 会 对 传递 给 本 体 的 方法 调用 进行 修改 。 
而 装饰 者 就 是 为 修改 方法 而 生 的 。 另 一 个 区 别 表 现在 被 包装 对 象 的 创建 方式 上 。 在 装饰 者 模式 中 ， 
被 包装 对 象 的 实例 化 过 程 是 完全 独立 的 。 这 个 对 象 创建 出 来 之 后 ， 你 可 以 随意 为 其 训 上 一 个 或 更 
多 装饰 者 。 而 在 代理 模式 中 ， 被 包装 对 象 的 实例 化 是 代理 的 实例 化 过 程 的 一 部 分 。 在 某 些 类 型 的 
虚拟 代理 中 ， 这 种 实例 化 受到 严格 控制 ， 它 必须 在 代理 内 部 进行 。 此 外 ， 代 理 不 会 像 装饰 者 那样 
互相 包装 。 它 们 一 次 只 使 用 一 个 。 


14.2 ”代理 模式 的 适用 场合 


关于 代理 应 该 什么 时 候 用 , 最 清楚 的 说 明 可 以 在 虚拟 代理 的 定义 中 找到 : 虚拟 代理 是 一 个 对 象 ， 
用 于 控制 对 一 个 创建 开销 昂贵 的 资源 的 访问 。 虚 拟 代理 是 一 种 优化 模式 。 如 果 有 些 类 或 对 象 需要 使 
用 大 量 内 存 保存 其 数据 ， 而 你 并 不 需要 在 实例 化 完成 之 后 立即 访问 这 些 数 据 ， 或 者 ， 其 构造 函数 需 
要 进行 大 量 计 算 那 就 应 该 使 用 虚拟 代理 将 设置 开销 的 产生 推迟 到 真正 需要 使 用 数据 的 时 候 。 代 理 还 
可 以 在 设置 的 进行 过 程 中 提供 类 似 于 “正在 加 载 ……” 这 样 的 消息 ,这 可 以 形成 一 个 反应 积极 的 用 
户 界 面 ， 以 免 让 用 户 面 对 一 个 没有 任何 反馈 的 空白 页 面 发 呆 ， 不 知道 究竟 发 生 了 什么 事 。 

远程 代理 则 没有 这 样 清楚 的 用 例 。 如 果 需 要 访问 某 种 远程 资源 的 话 ， 那么 最 好 是 用 一 个 类 或 
对 象 来 包装 它 ， 而 不 是 一 遍 又 一 遍地 手工 设置 XMLHttpRequest 对 象 。 问 题 在 于 应 该 用 什么 类 型 的 
对 象 来 包装 这 个 资源 呢 ? 这 主要 是 个 命名 问题 。 如 果 包装 对 象 实现 了 远程 资源 的 所 有 方法 , WE 
就 是 一 个 远程 代理 。 如 果 它 会 在 运行 期 间 增添 一 些 方法 ， 那 它 就 是 一 个 装饰 者 。 如 果 它 简化 了 该 
远程 资源 〈 或 多 个 远程 资源 ) 的 接口 ， 那 它 就 是 一 个 门面 。 远 程 代 理 是 一 种 结构 型 模式 ， 它 提供 
了 一 个 访问 位 于 其 他 环境 中 的 资源 的 原生 JavaScript API (native JavaScript API). 

总 而 言 之 , 如 果 有 些 类 或 对 象 的 创建 开销 较 大 , 而 且 不 需要 在 实例 化 完成 后 立即 访问 其 数据 ， 
那么 应 该 使 用 虚拟 代理 。 如 果 你 有 某 种 远程 资源 ， 并 且 要 为 该 资源 提供 的 所 有 功能 实现 对 应 的 方 
法 ， 那 么 应 该 使 用 远程 代理 。 


14.3 示例 : 网 页 统计 


本 例 将 创建 一 个 远程 代理 ， 它 包装 了 一 个 用 来 提供 网 页 统计 数据 的 Web 服 务 。 这 个 Web 服 务 
由 一 系列 URL 组 成 ,它们 各 相当 于 一 个 拥有 可 选 参 数 的 方法 。 它 在 服务 器 端 用 什么 语言 实现 并 不 
重要 。 数 据 将 以 JSON 格 式 返 回 。 下 面 是 这 个 Web 服 务实 现 的 5 个 方法 : 


http://mydomain.com/stats/getPageviews/ 
http://mydomain.com/stats/getUniques/ 
http://mydomain.com/stats/getBrowserShare/ 
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http://mydomain.com/stats/getTopSearchTerms/ 

http: //mydomain.com/stats/getMostVisitedPages/ 

这 几 个 方法 都 有 用 来 限制 搜集 统计 数据 的 时 间 范 围 的 可 选 参数 〈 名 为 startDate 和 endDate)， 
对 于 前 面 的 4 个 方法 还 可 以 要 求 只 要 特定 网 页 的 统计 数据 。 

你 希望 在 整个 网 站 中 都 能 显示 这 些 统计 数据 , 但 只 在 用 户 需 要 的 时 候 才 显 示 。 目 前 的 做 法 是 
为 每 个 网 页 进行 手工 XHR 调 用 : 

/* Manually making the calls. */ 


var xhrHandler = XhrManager.createXhrHandler(); 
/* Get the pageview statistics. */ 


var callback = { 
success: function(responseText) { 
var stats = eval('(' + responseText + ')'); // Parse the JSON data. 
displayPageviews(stats); // Display the stats on the page. 


}, 
failure: function(statusCode) { 
throw new Error('Asynchronous request for stats failed.'); 


} 
}; 
xhrHandler.request('GET', '/stats/getPageviews/?page=index.html', callback); 


/* Get the browser statistics. */ 


var callback = { 
success: function(responseText) { 
var stats = eval('(' + responseText + ')'); // Parse the JSON data. 
displayBrowserShare(stats); // Display the stats on the page. 


3 
failure: function(statusCode) { 
throw new Error('Asynchronous request for stats failed.'); 


} 
}; 
xhrHandler.request('GET', '/stats/getBrowserShare/?page=index.html', callback); 
要 是 能 够 把 这 些 调 用 包装 在 一 个 对 象 中 就 好 了 , 这 个 对 象 应 该 展现 出 一 个 用 来 访问 数据 的 原 
生 JavaScript 接 口 。 这 样 就 不 会 有 前 例 中 那样 多 的 重复 性 代码 。 这 个 对 象 需要 实现 那个 Web 服 务 中 
的 5 个 方法 。 每 个 方法 都 会 执行 对 Web 服 务 的 XHR 调 用 以 获取 数据 ， 然 后 将 其 提供 给 回调 函数 。 ”[202 
首先 要 做 的 是 定义 Web 服 务 的 接口 。 其 目的 在 于 以 后 有 需要 的 时 候 能 够 换 用 其 他 类 型 的 代 
理 : 


/* PageStats interface. */ 


var PageStats = new Interface('PageStats', ['getPageviews', ‘getUniques', 
‘getBrowserShare’, ‘getTopSearchTerms', 'getMostVisitedPages' ]); 


然后 定义 远程 代理 StatsProxy 本 身 : 


www.TopSage.com 


186 第 14 章 代理 模式 


/* StatsProxy singleton. */ 
var StatsProxy = (function() { // implements PageStats 
/* Private attributes. */ 


var xhrHandler = XhrManager.createXhrHandler(); 
var urls = { 
pageviews: '/stats/getPageviews/', 
uniques: '/stats/getUniques/', 
browserShare: '/stats/getBrowserShare/', 
topSearchTerms: '/stats/getTopSearchTerms/", 
mostVisitedPages: '/stats/getMostVisitedPages/' 


Js 


/* Private methods. */ 


function xhrFailure() { 


throw new Error('StatsProxy: Asynchronous request for stats failed. '); 


} 


function fetchData(url, dataCallback, startDate, endDate, page) { 
var callback = { 
success: function(responseText) { 
var stats = eval('(' + responseText + ')'); 
dataCallback(stats); 


b 


failure: xhrFailure 
}; 
var getVars = []; 


if(startDate != undefined) { 
getVars.push('startDate=' + encodeURIComponent (startDate)); 


} 
if(endDate != undefined) { 
getVars.push('endDate=" + encodeURIComponent (endDate)) ; 


if(page != undefined) { 
getVars.push('page=' + page); 


if(getVars.length > 0) { 
url = url + '?' + getVars.join('&'); 


} 


xhrHandler.request('GET', url, callback); 
} 


/* Public methods. */ 
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return { 
getPageviews: function(callback, startDate, endDate, page) { 
fetchData(urls.pageviews, callback, startDate, endDate, page); 


}, 
getUniques: function(callback, startDate, endDate, page) { 
fetchData(urls.uniques, callback, startDate, endDate, page); 


}, 
getBrowserShare: function(callback, startDate, endDate, page) { 
fetchData(urls.browserShare, callback, startDate, endDate, page); 


}, 
getTopSearchTerms: function(callback, startDate, endDate, page) { 
fetchData(urls.topSearchTerms, callback, startDate, endDate, page); 


getMostVisitedPages: function(callback, startDate, endDate) { 
fetchData(urls.mostVisitedPages, callback, startDate, endDate); 


j; 

O03 

这 段 代 码 使 用 了 单 体 模 式 的 两 种 较 高 级 的 形式 ， 这 样 可 以 创建 私 用 属性 和 方法 。 接 口 所 需要 
的 那些 方法 被 定义 为 公用 方法 ， 而 助理 方法 则 被 定义 为 私 用 方法 。 所 有 公用 方法 都 调用 了 
fetchData 这 个 辅助 方法 ， 前 面 的 手工 实现 版 本 中 那些 重复 性 的 代码 都 被 集中 到 这 个 方法 中 。 

本 例 中 使 用 远程 代理 有 什么 好 处 呢 ? 现在 实现 代码 与 Web 服 务 的 耦合 变 得 更 松散 ， 而 重复 性 
代码 也 大 大 减少 了 。 对 待 StatsProxy 对 象 与 对 待 别 的 JavaScript 对 象 没什么 两 样 ， 你 可 以 随意 用 它 
进行 查询 。 不 过 ， 这 的 确 显 露 了 这 种 方法 的 一 个 弊端 。 远 程 代理 ， 根 据 其 定义 ， 应 该 能 掩盖 数据 
的 实际 来 源 。 即 使 你 可 以 将 其 视 为 本 地 资源 ， 它 实际 上 还 是 要 对 服务 器 进行 访问 ， 根 据 用 户 的 连 
接 速度 ， 这 种 访问 耗费 的 时 间 少 则 几 毫 秒 ， 多 则 几 秒 。 在 设计 远程 代理 时 ， 注 明 一 下 这 种 性 能 问 
题 很 有 必要 。 在 本 例 中 这 个 问题 可 以 通过 借助 回调 函数 进行 异步 调用 稍 加 缓解 ， 这样 程序 的 执行 
就 不 会 因为 要 等 待 调用 结果 而 被 阻塞 。 但 是 回调 函数 的 存在 多 少 暴露 了 一 些 下层 的 实现 细节 ， 因 
为 如 果 不 与 外 部 服务 通信 的 话 是 不 需要 使 用 回调 函数 的 。 


14.4 包装 Web 服务 的 通用 模式 


我 们 可 以 从 上 面 的 例子 中 提炼 出 一 个 更 加 通用 的 Web 服 务 包装 模式 。 尽 管 在 设计 这 种 代理 时 
其 具体 实现 细节 会 因 Web 服 务 的 类 型 而 异 ， 但 是 这 个 通用 模式 可 以 为 你 提供 一 个 一 般 性 的 框架 。 
由 于 JavaScript 的 同 源 性 限制 ，Web 服 务 代理 所 包装 的 服务 必须 部 署 在 使 用 代理 的 网 页 所 在 的 域 
中 。 这 里 使 用 的 不 是 一 个 单 体 ， 而 是 一 个 拥有 构造 函数 的 普通 类 ， 以 便 以 后 进行 扩展 : 


/* WebserviceProxy class */ 


var WebserviceProxy = function() { 
this.xhrHandler = XhrManager.createXhrHandler(); 
J 
WebserviceProxy.prototype = { 
_xhrFailure: function(statusCode) { 
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throw new Error('StatsProxy: Asynchronous request for stats failed.'); 
}, 
_fetchData: function(url, dataCallback, getVars) { 
var that = this; 
var callback = { 
success: function(responseText) { 
var obj = eval('(' + responseText + ')'); 
dataCallback(obj); 
}, 
failure: that. _xhrFailure 


j 


var getVarArray = []; 
for(varName in getVars) { 
getVarArray.push(varName + '=' + getVars[varName]); 


if(getVarArray.length > 0) { 
url = url + '?' + getVarArray.join('&'); 
} 


xhrHandler.request('GET', url, callback); 
} 
}; 
使 用 这 个 通用 模式 时 ， 只 需 从 WebserviceProxy 派 生 一 个 子 类 ， 然后 再 借助 fetchData 方 法 实 
现 需 要 的 方法 即 可 。 如 果 把 StatsProxy 类 实现 为 Webserviceproxy 的 子 类 ， 其 结果 大 致 如 下 ; 


/* StatsProxy class. */ 


var StatsProxy = function() {}; // implements PageStats 
extend(StatsProxy, WebserviceProxy); 


/* Implement the needed methods. */ 


StatsProxy.prototype.getPageviews = function(callback, startDate, endDate, 
page) { 
this._fetchData('/stats/getPageviews/', callback, { 
'startDate': startDate, 
'endDate': endDate, 


'page': page E 
}); 
k 
StatsProxy.prototype.getUniques = function(callback, startDate, endDate, 
page) { 


this._fetchData('/stats/getUniques/', callback, { 
'startDate': startDate, 
'endDate': endDate, 
'page': page 
}; 


StatsProxy.prototype.getBrowserShare = function(callback, startDate, endDate, 
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page) { 
this. fetchData('/stats/getBrowserShare/', callback, { 
‘startDate': startDate, 
‘endDate': endDate, 
"page': page 
}; 
StatsProxy.prototype.getTopSearchTerms = function(callback, startDate, 
endDate, page) { 
this. fetchData('/stats/getTopSearchTerms/', callback, { 
'startDate': startDate, 
'endDate': endDate, 
'page': page 
; 
}; 
StatsProxy.prototype.getMostVisitedPages = function(callback, startDate, 
endDate) { 
this, fetchData('/stats/getMostVisitedPages/', callback, { 
'startDate': startDate, 
"endDate' : endDate 
2 


}; 
14.5 示例 : 目录 查找 


这 次 的 任务 是 为 公司 网 站 的 主页 添加 一 个 可 搜索 的 员工 目录 。 它 应 该 模仿 实际 的 员工 花 名 册 
中 的 页 面 ， 从 A 开始 ， 显 示 其 姓氏 以 特定 字母 开头 的 所 有 员工 。 由 于 这 个 网 页 的 访问 量 很 大 ， 所 
以 这 个 解决 方案 必须 尽量 节约 带宽 。 我 们 不 希望 这 个 小 小 的 特性 拖累 整个 网 页 。 
因为 在 这 个 问题 中 网 页 的 大 小 很 重要 , 所 以 我 们 决定 只 为 那些 需要 查看 员工 资料 的 用 户 加 载 
这 种 数据 〈 要 知道 其 数据 量 相 当 大 )。 这 样 一 来 ， 那 些 不 关心 这 种 信息 的 用 户 就 不 用 下 载 额 外 的 
数据 。 这 是 虚拟 代理 可 以 大 显 身 手 的 地 方 ， 因 为 它 能 够 把 需要 占用 大 量 带 宽 的 资源 的 加 载 推 迟到 
必要 的 时 候 。 我 们 还 打算 在 加 载 员 工 目录 的 过 程 中 向 用 户 提供 一 些 提示 信息 ， 以 免 他 们 盯 着 一 个 
空白 屏幕 ， 猜 想 是 不 是 网 站 出 了 什么 问题 。 这 种 任务 非常 适合 虚拟 代理 。 
首先 要 做 的 是 创建 代理 的 那个 本 体 类 。 它 负 责 获取 员工 数据 并 生成 用 于 在 网 页 上 显示 这 些 数 
据 的 HTML 内 容 ， 其 显示 格式 类 似 于 电话 号 码 短 : 
/* Directory interface. */ 
var Directory = new Interface('Directory', ['showPage']); 
/* PersonnelDirectory class, the Real Subject */ 
var PersonnelDirectory = function(parent) { // implements Directory 
this.xhrHandler = XhrManager.createXhrHandler(); 
this.parent = parent; 


this.data = null; 
this.currentPage = null; 
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var that = this; 
var callback = { 
success: that._configure, 
failure: function() { 
throw new Error('PersonnelDirectory: failure in data retrieval.'); 


} 


xhrHandler.request('GET', ‘directoryData.php', callback); 
}; 
PersonnelDirectory.prototype = { 
_configure: function(responseText) { 
this.data = eval('(' + reponseText + ')'); 


this.turrentPage = ‘a’; 
Se function(page) { 
$('page-' + this.currentPage).style.display = ‘none’; 
$(‘page-' + page).style.display = ‘block’; 
this.currentPage = page; 
Ms 
该 类 的 构造 函数 会 发 出 一 个 XHR 请 求 以 获取 员工 数据 。 其 _configure 方 法 会 在 数据 返回 的 时 
候 被 调用 , 它 会 生成 HTML 元 素 并 向 其 中 填 入 数据 (为 简洁 起 见 , 该 方法 的 大 部 分 内 容 已 被 省 略 )。 
该 类 实现 了 一 个 目录 应 有 的 所 有 功能 。 那 么 为 什么 还 要 使 用 代理 呢 ? 原因 在 于 ， 这 个 类 在 实例 化 
过 程 中 会 加 载 大 量 数据 。 如 果 在 网 页 加 载 的 时 候 实例 化 这 个 类 ,那么 每 一 个 用 户 都 不 得 不 加 载 这 
些 数据 ， 即 使 他 根本 不 使 用 员工 目录 。 代 理 的 作用 就 是 推迟 这 个 实例 化 过 程 。 
下 面 先 勾勒 出 虚拟 代理 类 的 大 体 轮廓 , 它 包含 了 该 类 需要 的 所 有 方法 。 本 例 中 需要 实现 的 只 
有 showPage 方 法 和 构造 函数 : 


/* DirectoryProxy class, just the outline. */ 


var DirectoryProxy = function(parent) { // implements Directory 


j; 
DirectoryProxy.prototype = { 
showPage: function(page) { 


} 
}; 


下 一 步 是 先 将 这 个 类 实现 为 一 个 无 用 的 代理 ， 它 的 每 个 方法 所 做 的 只 是 调用 本 体 的 同名 方 
/* DirectoryProxy class, as a useless proxy. */ 


var DirectoryProxy = function(parent) { // implements Directory 
this.directory = new PersonnelDirectory(parent) ; 


}; 
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DirectoryProxy.prototype = { 
showPage: function(page) { 
return this.directory.showPage(page) ; 


}; 

现在 这 个 代理 可 以 代替 Personne1Directory 的 实例 使 用 。 它 们 可 以 透明 地 互 换 。 不 过 ， 在 此 
情况 下 你 丝毫 没有 享受 到 虚拟 代理 的 好 处 。 要 想 发 挥 虚拟 代理 的 作用 ， 需 要 创建 一 个 用 来 实例 化 
本 体 的 方法 ， 并 注册 一 个 用 来 触发 这 个 实例 化 过 程 的 事件 监听 器 : 


/* DirectoryProxy class, as a virtual proxy. */ 


var DirectoryProxy = function(parent) { // implements Directory 
this.parent = parent; 
this.directory = null; 
var that = this; 
addEvent(parent, ‘mouseover’, that. initialize); // Initialization trigger. 
}; 20 


DirectoryProxy.prototype = { 
_initialize: function() { 
this.directory = new PersonnelDirectory(this.parent); 
}, 
showPage: function(page) { 
return this.directory.showPage(page) ; 


oo 


}; 

现在 DirectoryProxy 类 的 构造 函数 不 再 实例 化 本 体 ,， 而 是 把 这 个 工作 推迟 到 _initialize 中 进 
行 。 我 们 注册 了 一 个 事件 监听 器 ， 作 为 这 个 方法 的 触发 器 。 触 发 器 的 作用 在 于 通知 代理 对 象 用 户 
需要 实例 化 其 本 体 ， 它 可 以 有 许多 实现 选择 。 在 本 例 中 ， 一 旦 用 户 把 鼠标 指针 移 到 目录 的 父 容器 
上 方 ， 本 体 就 会 被 实例 化 。 在 更 复杂 的 解决 方案 中 ， 可 以 先 为 目录 生成 一 个 空白 的 用 户 界面 ， 一 
旦 某 个 表单 域 处 于 焦点 之 下 ， 它 就 会 被 初始 化 后 的 本 体 透 明 地 取代 。 

这 个 例子 已 经 接近 于 完工 。 剩 下 的 任务 只 有 一 件 ， 那 就 是 提示 用 户 当前 正在 加 载 员工 目录 ， 
并 且 在 本 体 创建 完毕 之 前 阻止 任何 方法 调用 : 


/* DirectoryProxy class, with loading message. */ 


var DirectoryProxy = function(parent) { // implements Directory 
this.parent = parent; 
this.directory = null; 
this.warning = null; 
this.interval = null; 
this.initialized = false; 
var that = this; 
addEvent(parent, ‘mouseover', that. initialize); // Initialization trigger. 
, 
DirectoryProxy.prototype = { 
_initialize: function() { 
this.warning = document.createElement( ‘div’ ); 
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this.parent.appendChild(this.warning); 
this.warning.innerHTML = ‘The company directory is loading...'; 


this.directory = new PersonnelDirectory(this.parent) ; 
var that = this; 
this.interval = setInterval(function() { that._checkInitialization();}, 100); 


J 
_checkInitialization: function() { 
if(this.directory.currentPage != null) { 
clearInterval(this. interval); 
this.initialized = true; 
this.parent.removeChild(this.warning) ; 


} 
h 
showPage: function(page) { 
if(!this.initialized) { 
return; 


a this.directory.showPage(page); 

E; 

阻止 对 showpage 的 调用 很 容易 ， 只 需要 检查 一 下 initialized 属 性 ， 仅 当 其 值 为 true 的 时 候 才 
允许 调用 本 体 的 这 个 方法 。 相 比 之 下 ,在 对 象 的 加 载 过 程 中 显示 一 条 提示 信息 则 要 麻烦 一 点 。 怎 
样 才能 知道 那个 类 什么 时 候 加 载 完毕 呢 ? 可 以 考虑 在 本 体 类 中 定义 一 个 自 定义 事件 , 然后 让 代理 
订阅 这 个 事件 。 不 过 在 本 例 中 我 们 选择 了 一 种 比较 简单 的 技术 。 因 为 Personne1Directory 实 例 的 
currentpage 属 性 只 有 在 数据 加 载 完毕 之 后 才 会 被 设置 ， 所 以 我 们 每 隔 100 毫 秒 检查 一 次 这 个 属 
性 ， 直 到 发 现 它 已 经 被 设置 了 为 止 。 此 时 即 可 清除 加 载 提示 并 将 代理 标记 为 已 初始 化 。 

这 个 虚拟 代理 到 此 已 经 设计 完毕 。 这 只 是 一 个 用 来 说 明 这 种 代理 的 工作 机 制 的 非常 简单 的 例 
子 。 要 是 设计 一 个 更 复杂 的 版 本 的 话 ， 那 个 初始 化 检查 还 可 以 设计 得 再 健壮 一 些 ， 实 例 化 过 程 的 
触发 器 也 可 以 设计 得 更 精巧 一 些 。 每 个 代理 都 会 因为 你 所 期 待 的 用 户 交互 方式 而 有 所 不 同 。 下 面 
要 讲 的 是 一 个 动态 虚拟 代理 ， 可 以 用 它 作 模板 创建 自己 的 代理 。 


14.6 ”创建 虚拟 代理 的 通用 模式 


JavaScript 是 一 种 非常 灵活 的 语言 。 得 益 于 此 ,你 可 以 创建 一 个 动态 虚拟 代理 , 它 会 检查 提供 
给 它 的 类 的 接口 , 创建 自己 的 对 应 方法 , 并且 将 该 类 的 实例 化 推迟 到 某 些 预定 条 件 得 到 满足 的 时 
(Rs 作为 第 一 步 ， 下 面 先 创 建 这 个 动态 代理 类 的 壳 体 以 及 _initialize 和 _checkInitialization 这 
两 个 方法 。 这 是 一 个 抽象 类 ， 需 要 派生 子 类 并 进行 一 些 配 置 才 能 正常 工作 ; 

/* DynamicProxy abstract class, incomplete. */ 

var DynamicProxy = function() { 


this.args = arguments; 
this.initialized = false; 
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}; 
DynamicProxy.prototype = { 
_initialize: function() { 
this.subject = {}; // Instantiate the class. 
this.class.apply(this.subject, this.args); 
this.subject. proto_ = this.class.prototype; 


var that = this; 
this.interval = setInterval(function() { that._checkInitialization(); }, 100); 


} 


checkInitialization: function() { 
if(this. isInitialized()) { 
clearInterval(this. interval); 
this.initialized = true; 
} 
}, 
_isInitialized: function() { // Must be implemented in the subclass. 
throw new Error('Unsupported operation on an abstract class.'); 
} 

}; 

该 类 的 构造 函数 你 基本 上 可 以 暂且 不 管 , 稍 后 我 们 还 会 回头 充实 它 。 这 个 类 实现 了 三 个 方法 。 
_initialize 方 法 用 于 触发 本 体 的 实例 化 过 程 。 它 可 以 被 关联 到 各 种 触发 器 或 条 件 。 check- 
Initializationr 方 法 每 隔 一 段 预定 的 时 间 会 被 调用 一 次 ， 它 会 调用 isInitialized 方 法 ， 如 果 返 
回 值 为 true， 就 将 initialized 属 性 设置 为 true。 在 初始 化 完成 之 前 ， 代 理 将 阻止 对 本 体 的 所 有 方 
法 的 调用 。 而 _isInitialized 方 法 就 是 用 来 判断 代理 的 初始 化 是 否 已 经 完成 的 。 子 类 必须 实现 这 
个 方法 ， 因 为 对 应 于 不 同 的 本 体 这 个 方法 会 有 所 不 同 。 

现在 需要 在 构造 函数 中 添加 一 些 代 码 , 以 便 针对 本 体 类 中 的 每 一 个 方法 为 代理 创建 一 个 相应 
的 方法 。 这 与 动态 装饰 者 那个 例子 中 的 代码 非常 相似 ， 但 其 中 也 有 一 些 重要 区 别 : 


/* DynamicProxy abstract class, complete. */ 


var DynamicProxy = function() { 
this.args = arguments; 
this.initialized = false; 


if(typeof this.class != ‘function’) { 
throw new Error('DynamicProxy: the class attribute must be set before ' + 
"calling the super-class constructor. '); 


} 


// Create the methods needed to implement the same interface. 
for(var key in this.class.prototype) { 
// Ensure that the property is a function. 
if(typeof this.class.prototype[key] !== ‘function') { 
continue; 


} 
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// Add the method. 
var that = this; 
(function(methodName) { 
that[methodName] = function() { 
if(!that.initialized) { 
return 


return that.subject[methodName].apply(that.subject, arguments); 
}; 
}) (key); 
} 


j; 
DynamicProxy.prototype = { 
_initialize: function() { 
this.subject = {}; // Instantiate the class, 
this.class.apply(this.subject, this.args); 
this.subject.__proto__ = this.class.prototype; 


var that = this; 
this.interval = setInterval(function() { that. checkInitialization(); }, 100); 


} 


, 
heckInitialization: function() { 
if(this. isInitialized()) { 
clearInterval(this.interval); 
this.initialized = true; 
} 
} 


isInitialized: function() { // Must be implemented in the subclass. 
throw new Error('Unsupported operation on an abstract class.'); 
} 

}; 

最 重要 的 区 别 在 于 ， 这 里 是 在 对 本 体 类 的 prototype 中 的 方法 进行 逐一 检查 ， 而 不 是 对 本 体 对 
象 本 身 进行 检查 。 这 是 因为 此 时 本 体 还 未 被 实例 化 ， 自 然 还 不 存在 本 体 对 象 ， 因 此 在 决定 需要 实 
现 一 些 什么 方法 时 检查 的 是 本 体 类 而 不 是 本 体 对 象 .在 这 个 过 程 中 所 添加 的 每 一 个 方法 都 由 两 个 
部 分 组 成 : 先 执行 的 是 一 个 检查 ， 其 目的 在 于 确保 本 体 已 经 初始 化 ; 随后 是 对 本 体 中 同名 方法 的 
调用 。 

要 想 使 用 这 个 类 ， 必 须 先 从 它 派 生子 类 。 为 了 演示 其 用 法 ， 我 们 创建 了 一 个 TestProxy 类 ， 
它 被 用 作 虚 构 的 TestC1ass 的 代理 : 


/* TestProxy class. */ 


var TestProxy = function() { 
this.class = TestClass; 
var that = this; 
addEvent($('test-link'), ‘click’, function() { that. initialize(); }); 
// Initialization trigger. 
TestProxy.superclass.constructor.apply(this, arguments); 
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}; 
extend(TestProxy, DynamicProxy); 
TestProxy.prototype. isInitialized = function() { 
... // Initialization condition goes here. 


}; 
在 子 类 中 必须 做 的 事 有 4 件 : 将 this.class 设 置 为 本 体 类 ; 创建 某 种 实例 化 触发 器 (本 例 的 
设计 是 在 点 击 一 个 链接 时 进行 实例 化 ); 调用 超 类 的 构造 函数 (就 像 所 有 子 类 都 要 做 的 那样 )， 实 
现 _isInitialized 方 法 ( 它 应 该 根据 本 体 是 否 已 初始 化 返回 true 或 false)。 

这 个 动态 代理 会 把 本 体 的 实例 化 推迟 到 你 认为 必要 的 时 候 。 在 实例 化 完成 之 前 ,代理 的 所 有 
公用 方法 什么 事 都 不 会 做 。 这 个 类 可 以 用 来 包装 那些 需要 大 量 计算 或 较 长 时 间 才能 实例 化 的 类 。 


14.7 ”代理 模式 之 利 


不 同类 型 的 代理 有 不 同 的 好 处 。 借 助 远程 代理 , 可 以 把 远程 资源 当 作 本 地 JavaScript 对 象 使 用 。 
其 益处 显而易见 。 它 减少 了 为 访问 远程 资源 而 不 得 不 编写 的 粘 合 性 代码 的 数量 ， 并 且 为 此 提供 了 
单一 的 接口 。 如 果 远 程 资源 提供 的 API 发 生 了 变化 ， 需 要 修改 的 代码 只 有 一 处 。 它 还 把 与 远程 资 
源 相关 的 所 有 数据 统一 保存 在 一 个 地 方 ， 其 中 包括 资源 的 URL、 数 据 格式 、 命 令 和 响应 的 结构 。 
如 果 需 要 访问 多 个 Web 服 务 ， 那 么 可 以 先 创建 一 个 抽象 的 通用 远程 代理 类 ， 然 后 针对 每 一 种 要 访 
问 的 Web 服 务 派生 出 一 个 子 类 。 

虚拟 代理 则 有 着 截然 不 同 的 作用 。 它 并 不 会 减少 重复 性 的 代码 和 提高 对 象 的 模块 性 ,这 与 本 
书 所 讲 的 大 多 数 模式 都 不 一 样 。 实 际 上 它 还 会 在 网 页 中 增加 一 些 代码 , 而 这 些 代码 并 非 必 不 可 少 。 
这 种 模式 的 作用 体现 在 效率 方面 。 它 是 一 种 优化 模式 ， 只 有 当 资 源 的 创建 或 保有 开销 较 大 ， 因 此 
需要 使 用 代理 来 控制 它们 的 创建 时 间 和 方式 时 , 才 可 派 上 用 场 。 在 这 类 场合 下 它 表 现 得 非常 出 色 。 
借助 这 种 模式 ， 你 可 以 使 用 本 体 的 所 有 功能 而 不 必 操心 其 实例 化 的 事 。 它 还 可 以 在 本 体 加 载 完毕 
之 前 显示 “正在 加 载 ” 这 样 的 提示 信息 或 者 显示 一 个 虚设 用 户 界 面 (dummy user interface)。 在 
速度 比较 重要 的 网 页 中 ,虚拟 代理 可 以 用 来 把 大 对 象 的 实例 化 推迟 到 其 他 元 素 加 载 完毕 之 后 。 这 
往往 能 给 最 终 用 户 带 来 一 种 速度 大 幅 提 升 的 感觉 。 如 果 虚 拟 代理 包装 的 资源 没有 被 用 到 ， 那 么 它 
根本 就 不 会 被 加 载 。 虚 拟 代理 的 主要 好 处 就 在 于 ， 你 可 以 用 它 代替 其 本 体 ， 而 不 用 操心 实例 化 开 
销 的 问题 。 


14.8 代理 模式 之 闲 


不 同类 型 的 代理 具有 不 同 的 好 处 ， 但 它们 的 整 端 却 是 相同 的 。 代 理 刻 意 掩 盖 了 大 量 复杂 行 
为 。 以 远程 代理 为 例 ， 其 背后 的 复杂 行为 包括 发 出 XHR 请 求 、 等 待 响 应 、 对 响应 结果 进行 解析 
以 及 输出 收 到 的 数据 。 在 使 用 远程 代理 的 程序 员 眼 里 ， 它 可 能 就 像 一 个 本 地 资源 ， 但 访问 它 所 
人 花 的 时 间 却 比 访问 本 地 资源 要 多 出 几 个 数量 级 。 而 且 ， 它 需要 和 回调 函数 结合 使 用 ， 因 为 让 方 
法 直接 返回 结果 是 行 不 通 的 ， 这 给 代码 增加 了 一 定 的 复杂 性 ， 并 且 进 一 步 拆 穿 了 其 本 地 资源 的 
假象 。 此 外 ， 远 程 代理 只 有 在 能 够 与 远程 资源 通信 的 条 件 下 才能 工作 ， 因 此 其 可 靠 性 也 得 打点 
折扣 。 与 设计 模式 的 大 多 数 问题 一 样 ， 这 里 所 说 的 问题 也 能 通过 精心 编撰 的 程序 文档 加 以 消除 
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(至 少 也 可 以 减轻 其 不 利 影响 )。 如 果 程 序 员 能 明确 自己 在 性 能 和 可 靠 性 方面 的 目标 ， 那么 在 代 
理 使 用 的 问题 上 他 们 可 以 便宜 行事 。 
对 虚拟 代理 来 说 情况 也 是 如 此 。 它 掩盖 了 推迟 本 体 的 实例 化 的 逻辑 。 使 用 这 种 代理 的 程序 员 
并 不 清楚 有 哪些 操作 会 触发 对 象 的 实例 化 。 这 些 实现 细节 没有 必要 披露 出 来 。 不过， 如 果 程 序 员 
213) ”以 为 立刻 就 能 访问 到 本 体 的 话 , 他 们 可 能 难免 吃 上 一 惊 。 在 此 情况 下 高 质量 的 文档 也 有 一 些 帮助 。 
要 是 用 在 恰当 的 场合 ， 这 些 代理 都 非常 有 用 。 但 如 果 勉 强 使 用 的 话 ， 它 们 也 会 坏事 ， 因 为 此 
时 它们 给 项 目 带 来 的 是 不 必要 的 复杂 性 和 代码 。 因 为 代理 与 其 本 体 完全 可 以 互 换 ， 所 以 如 果 没 有 
令 人 信服 的 理由 使 用 代理 的 话 ， 最 好 还 是 选择 直接 访问 本 体 这 种 简单 得 多 的 办 法 。 在 为 创建 一 个 
代理 费心 劳力 之 前 ， 请 确保 你 确实 需要 它 提供 的 特性 。 


14.9 小结 


本 章 讨论 了 代理 模式 的 各 种 形式 。 每 一 种 形式 的 代理 都 以 自己 的 方式 控制 对 资源 的 访问 。 这 
种 资源 被 称 为 本 体 。 

保护 代理 根据 客户 身份 控制 对 本 体 方 法 的 访问 。 本 章 没有 涉及 这 种 代理 ， 因 为 它 无 法 在 
JavaScript 中 实现 。 

远程 代理 负责 控制 对 远程 资源 的 访问 。 在 Java 这 样 的 语言 中 ， 远 程 代理 所 做 的 就 是 连接 到 一 
个 持久 存在 的 Java 虚 拟 机 并 传递 方法 调用 。 在 客户 端 JavaScript 中 不 可 能 有 这 样 的 用 法 。 不 过 ， 远 
程 代 理 在 封装 用 其 他 语言 编写 的 Web 服 务 方面 很 有 用 处 。 借 助 这 种 代理 ， 远 程 资 源 也 能 像 本 地 资 
源 一 样 访问 。 

虚拟 代理 用 于 控制 对 创建 或 保有 开销 较 大 的 类 或 对 象 的 访问 。 它 在 JavaScript 中 非常 有 用 ， 
为 最 终 用 户 的 浏览 器 可 供 代 码 运 行 的 内 存 可 能 不 多 。 虚拟 代理 也 有 助 于 解决 本 体 的 加 载 过 程 比较 
缓慢 所 带 来 的 问题 ， 它 可 以 先 为 最 终 用 户 提供 “正在 加 载 ” 这 样 的 提示 信息 ， 或 者 先 提供 一 个 虚 
设 用 户 界面 ， 这 样 用 户 在 最 终 的 实际 用 户 界 面 载 入 之 前 可 以 先 与 之 互动 。 

代理 任何 时 候 都 可 以 被 替换 为 本 体 。 它 会 增加 项 目的 复杂 性 。 除 非 它 能 降低 你 的 代码 的 元 余 
程度 、 提 高 其 模块 化 程度 或 运行 效率 ， 否 则 不 要 使 用 它 。 如 果 运 用 得 当 ， 那 么 代理 能 够 大 大 简化 

对 资源 的 访问 ， 这 是 其 他 方法 难以 办 到 的 。 
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事件 驱动 的 环境 中 ， 比 如 浏览 器 这 种 持续 寻求 用 户 关注 的 环境 中 ， 观 察 者 模式 (又 名 

二 安 布 者 -订阅 者 (publishersubscriber) Bist) 是 一 种 管理 人 与 其 任务 之 间 的 关系 《 确 

切 地 讲 , 是 对 象 及 其 行为 和 状态 之 间 的 关系 ) 的 得 力 工具 。 用 JavaScript 的 话 来 说 ,这 种 模式 的 实 
质 就 是 你 可 以 对 程序 中 某 个 对 象 的 状态 进行 观察 ， 并 且 在 其 发 生 改变 时 能 够 得 到 通知 。 

观察 者 模式 中 存在 两 个 角色 观察 者 和 被 观察 者 。 本 书 一 般 倾向 于 称 其 为 发 布 者 和 订阅 者 . 

这 种 模式 在 JavaScript 中 有 几 种 不 同 的 实现 方式 , 本 章 将 对 其 中 的 一 些 实现 方式 进行 考察 。 不 过 我 

们 首先 要 说 明 一 下 发 布 者 和 订阅 者 这 两 种 角色 。 下 一 节 的 例子 以 报 业 为 例 说 明了 观察 者 模式 的 工 

作 方 式 。 


15.1 示例 : 报纸 的 投 送 


在 报纸 行业 中 ， 发 行 和 订阅 的 顺利 进行 有 赖 于 一 些 关 键 性 的 角色 和 行为 。 首 先是 读者 。 他 们 
都 是 订阅 者 〈subscriber)， 是 与 你 我 一 样 的 人 。 我 们 消费 数据 并 且 根 据 读 到 的 消息 做 出 反应 。 我 
们 可 以 选择 自己 的 居住 地 点 ， 让 报社 把 报纸 送 到 自己 家 中 。 这 个 活动 中 的 另 一 个 角色 是 发 行 方 
(publisher)。 他 们 负责 出 版 诸如 San Francisco Chronicle, New York Times 和 Sacramento Bee 这 样 的 
报纸 。 

确定 了 各 方 的 身份 之 后 ， 我 们 就 可 以 分 析 每 一 方 的 职责 所 在 。 作 为 报纸 的 订阅 者 ， 我 们 有 一 
些 事 要 做 。 数 据 到 来 的 时 候 我 们 收 到 通知 。 我 们 消费 数据 。 然 后 我 们 根据 数据 做 出 反应 。 只 要 报 
纸 到 了 订阅 者 手中 ， 他 们 就 可 以 自行 处 置 。 有 些 人 读 完 之 后 会 将 其 扔 在 一 边 ， 有 些 人 会 向 朋友 或 
家 人 转述 其 中 的 新 闻 , 甚至 还 有 一 些 人 会 把 报纸 送 回去 。 总 而 言 之 , 订阅 者 要 从 发 行 方 接收 数据 。 

发 行 方 则 要 发 送 数 据 。 在 本 例 中 ， 发 行 方 也 是 投 送 方 (deliver)。 一 般 说 来 ， 一 个 发 行 方 很 
可 能 有 许多 订阅 者 ， 同 样 ， 一 个 订阅 者 也 很 可 能 会 订阅 多 家 报社 的 报纸 。 问 题 的 关键 在 于 ， 这 是 
一 种 多 对 多 的 关系 ， 需 要 一 种 高 级 的 抽象 策略 ， 以 便 订 阅 者 能 够 彼此 独立 地 发 生 改变 ， 而 发 行 方 
能 够 接受 任何 有 消费 意向 的 订阅 者 。 


15.1.1 推 与 拉 的 比较 


对 于 报社 来 说 ， 只 为 给 几 个 订阅 者 投 送 报纸 就 满 世 界 跑 是 不 划算 的 。 而 纽约 市 的 居民 也 不 可 
能 特意 飞 到 旧金山 去 拿 自 己 订 的 San Francisco Chronicle, 要 知道 这 份 报纸 可 以 直接 投 送 到 他 们 家 
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门口 。 

订阅 者 要 想 拿 到 报纸 的 话 有 两 种 投 送 方式 可 选 : 推 或 拉 。 在 推 环境 中 ， 发 行 方 很 可 能 会 雇佣 
投 送 人 员 四 处 送 报 。 换 句 话说， 他 们 把 自己 的 报纸 推出 去 ， 让 订阅 者 收取 。 在 拉 环 境 中 ， 规 模 较 
小 的 本 地 报社 可 能 会 在 订阅 者 家 附近 的 街角 提供 自己 的 数据 ， 供 订阅 者 “ 拉 ”。 那 些 成 长 型 发 行 
方 没有 足够 的 资源 进行 大 规模 投 送 ,因此 采用 拉 方 案 , 让 订阅 者 到 当地 的 杂货 店 或 自动 售 货 机 那 
里 “ 拿 ” 报 ， 对 于 它们 来 说 往往 是 个 优化 投 送 环 节 的 好 办 法 。 


15.1.2 ”模式 的 实践 


在 JavaScript 中 有 多 种 方法 可 以 实现 发 布 者 -订阅 者 模式 。 在 展示 那些 示例 之 前 ， 我 们 先 确保 

各 种 角色 的 扮演 者 对象) RHN 
Di 

E 

o = tte 


eke S pz st 它 是 Sells 方 法 (Sellsian 
approach) op Sen 二 测试 训 动 的 开发 (TDD)， 不 过 它 要 求 先 写 实现 代码 ， 
就 像 API 已 经 写 好 了 -一样 。 为 子 让 这 些 代码 成 为 可 运转 的 真正 实现 ， 程 序 员 需 要 完成 各 种 该 做 的 
工作 ，API 由 此 形成 : 


/* From 
http://pluralsight.com/blogs/dbox/archive/2007/01/24/45864.aspx 
oe 





还 要 接收 。 他 们 可 以 在 “由 人 投 送 (being delivered to)” 1 
之 间 进 行 选择 。 
(giving)” 和 “由 人 取 (being taken from)” 之 间 进 






/* 
* Publishers are in charge of "publishing" i.e. creating the event. 
* They're also in charge of "notifying" (firing the event). 

*/ 

var Publisher = new Observable; 


/* 

* Subscribers basically... "subscribe" (or listen). 

* Once they've been "notified" their callback functions are invoked. 
my 
var Subscriber = function(news) { 

// news delivered directly to my front porch 


; 
Publisher .subscribeCustomer(Subscriber); 
/* 


* Deliver a paper: 
* sends out the news to all subscribers. 


O 这 不 是 一 个 正式 的 术语 ， 而 是 Don Box 发 明 的 一 个 词 ， 用 来 指 Chris Sells 所 说 的 一 种 开发 方法 。 下 面 的 代码 中 开头 


部 分 的 注释 中 那个 URL 就 是 该 词 的 出 处 。 一 一 译 者 注 
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Publisher.deliver('extre, extre, read all about it'); 


/* 

* That customer forgot to pay his bill. 
*/ 
Publisher.unSubscribeCustomer (Subscriber) ; 


在 这 个 模型 中 ,可 以 看 出 发 布 者 处 于 明显 的 主导 地 位 。 它 们 负责 登记 其 顾客 , 而 且 有 权 停 止 
为 其 投 送 。 最 后 ， 新 的 报纸 出 版 后 它们 会 将 其 投 送 给 顾客 。 

上 面 的 代码 创建 了 一 个 新 的 可 观察 (observable〉 对 象 。 它 有 三 个 实例 方法 : subscribe- 
Customer, 、unsSubscribeCustomer 和 deliver。subscribeCustomer 方 法 以 一 个 代表 订阅 者 的 回调 函 
数 为 参数 。deliver 方 法 在 调用 过 程 中 将 通过 这 些 回调 函数 把 数据 发 送 给 每 一 个 订阅 者 。 

下 面 的 例子 处 理 的 是 同一 类 问题 ， 但 发 布 者 和 订阅 者 之 间 的 互动 方式 有 所 不 同 ; 

/* 

* Newspaper Vendors 

* setup as new Publisher objects 
*/ 
var NewYorkTimes = new Publisher; 


var AustinHerald = new Publisher; 
var SfChronicle = new Publisher; 


/* 
* People who like to read 
* (Subscribers) 
* 
* Each subscriber is set up as a callback method. 
* They all inherit from the Function prototype Object. 
at i 
var Joe = function(from) { 
console. log('Delivery from '+from+' to Joe'); 
var Lindsay = function(from) { 
console.log('Delivery from '+from+' to Lindsay’); 
var Quadaras = function(from) { 
console.log( ‘Delivery from '+from+' to Quadaras'); 


}; 


/* 

* Here we allow them to subscribe to newspapers 

* which are the Publisher objects. 

* In this case Joe subscribes to the NY Times and 

* the Chronicle. Lindsay subscribes to NY Times 

* Austin Herald and Chronicle. And the Quadaras 

* respectfully subscribe to the Herald and the Chronicle 
*/ 
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Joe. 
subscribe(NewYorkTimes). 
subscribe(SfChronicle); 


Lindsay. 
subscribe(AustinHerald). 
subscribe(SfChronicle). 
subscribe(NewYorkTimes) ; 


Quadaras. 
subscribe(AustinHerald). 
subscribe(SfChronicle); 


/* 
* Then at any given time in our application, our publishers can send 
* off data for the subscribers to consume and react to. 
*/ 
NewYorkTimes. 
deliver('Here is your paper! Direct from the Big apple'); 
AustinHerald. 
deliver(‘News'). 
deliver('Reviews'). 
deliver('Coupons'); 
SfChronicle. 
deliver('The weather is still chilly’). 
deliver('Hi Mom! I\'m writing a book'); 


在 这 个 例子 中 ,发布 者 的 创建 方式 和 订阅 者 接收 数据 的 方式 没有 多 少 改变 , 但 拥有 订阅 和 退 
订 权 的 一 方 变 成 了 订阅 者 。 当 然 ， 负 责 发 送 数 据 的 还 是 发 布 者 一 方 。 

本 例 中 的 发 布 者 是 Publisher 类 的 实例 。 它 有 一 个 deliver 方 法 。 而 作为 订阅 者 的 函数 对 象 则 
拥有 subscribe 和 unsubscribe 两 个 方法 。 订 阅 者 只 是 普通 的 回调 函数 ， 那 两 个 方法 是 通过 扩展 
Function 的 prototype 而 加 入 的 ?。 

下 面 我 们 将 一 步 一 步 地 构建 出 符合 需要 的 API。 


15.2 ”构建 观察 者 API 


在 明确 了 观察 者 模式 中 的 核心 成 员 之 后 ， 现 在 可 以 着 手 构建 其 API 了 。 首 先 ， 我 们 需要 一 个 
发 布 者 的 构造 函数 ， 它 为 该 类 实例 定义 了 一 个 类 型 为 数组 的 属性 ， 用 来 保存 订阅 者 的 引用 : 


function Publisher() { 
this.subscribers = []; 


} 
15.2.1 Hue 
所 有 Pub1lisher 实 例 都 应 该 能 够 投 送 数据 。 只 要 把 deliver 方 法 添加 到 Publisher 的 prototype 


O 因为 任何 函数 都 是 Function 的 实例 ， 所 以 在 Function.prototype 中 添加 的 新 方法 会 被 所 有 函数 继承 。 当 然 ， 这 里 把 


subscribe 和 unsubscribe 添 加 到 Function.prototype 中 只 是 为 了 省 事 ， 在 实际 项 目 中 不 应 该 这 样 做 。 一 一 译 者 注 
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中 ， 它 就 能 够 被 所 有 Publisher 对 象 共 享 : 
Publisher.prototype.deliver = function(data) { 
this. subscribers. forEach( 
function(fn) { 
fn(data); 


); 
return this; 
j 


这 个 方法 使 用 JavaScript 1.6 中 新 增 的 数组 方法 forEach (参见 “Mozilla 开 发 人 员 中 心 ” 网 站 


http://developer.mozilla.org/) 逐一 处 理 每 一 个 订阅 者 。forEach 方 法 会 对 一 个 “ 草 吉 (haystack)” . 


从 头 到 尾 访问 一 遍 ， 把 每 一 根 “ 针 (needle)”“ 针 ”的 索引 和 整个 数组 提供 给 一 个 回调 方法 。 
订阅 者 数组 中 的 每 根 “ 针 ”都 是 一 个 回调 函数 ， 比 如 Joe、Lindsay 和 Quadaras。 

deliver 方 法 把 this 用 作 返 回 值 ， 因 此 可 以 对 该 方法 进行 链 式 调用 〈 参 见 第 6 章 )， 以 连续 不 断 
地 投 送 数据 。 


15.2.2 ”订阅 方法 
下 一 步 是 给 予 订阅 者 订阅 的 能 力 : 


Function.prototype.subscribe = function(publisher) { 
var that = this; 
var alreadyExists = publisher.subscribers :some( 
function(el) { 
return el === that; 


); 
if ( !alreadyExists ) { 
publisher.subscribers.push(this); 


return this; 

}; 

这 段 代 码 为 Function 的 prototype 添 加 了 一 个 以 Pub1isher 对 象 为 参数 的 Subscribe 方 法 ， 因 此 
所 有 函数 都 能 调用 这 个 方法 。subscribe 方 法 先 定义 了 一 个 that 变 量 ,并 把 this 赋 给 它 。 后面 用 作 
数组 的 Some 方法 参数 的 那个 匿名 函数 将 通过 闭 包机 制 访问 到 这 个 变量 ， 从 而 访问 到 用 以 调用 
subscribe 方 法 的 那个 函数 对 象 。some 也 是 JavaScript 1.6 中 新 增 的 数组 方法 ， 它 以 一 个 回调 函数 为 
参数 。some 方 法 逐一 访问 数组 的 各 个 元 素 ， 并 以 其 为 参数 调用 那个 回调 函数 。 只 要 至 少 有 一 次 调 
用 回调 函数 时 返回 true， 则 some 方 法 返回 true， 否则 some 方 法 将 返回 false。subscribe 方 法 把 some 
方法 的 返回 值 赋 给 变量 a1readyExists， 然 后 根据 这 个 变量 的 值 决定 是 否 为 指定 的 发 布 者 添加 一 


O 这 里 所 谓 的 “ 草 吉 ” 和 “ 针 ” 分 别 指数 组 及 其 元 素 。 这 里 所 说 的 回调 函数 ， 是 指 forEach 方 法 的 那个 参数 。 这 个 
回调 函数 本 身 又 有 三 个 参数 ， 依 次 为 当前 数组 元 素 ( 即 “ 针 ”)、 当 前 数组 元 素 的 索引 值 、 数 组 。 本 例 中 的 那个 回 
调 函数 是 一 个 匿名 函数 ， 它 只 使 用 了 第 一 个 参数 。 注 意 ， 本 段 最 后 那 句 话 “订阅 者 数组 中 的 每 根 “ 针 ” 都 是 一 个 
回调 函数 ”中 的 “回调 函数 ”与 前 面 说 的 那个 回调 函数 不 是 一 回 事 。 一 一 译 者 注 
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个 订阅 者 。 最 后 ，subscribe 方 法 返回 this 值 ， 以 便 支持 该 方法 的 链 式 调用 。 
15.2.3” 退 订 方 法 
unsubscribe 方 法 可 供 订 阅 者 用 来 停止 对 指定 发 布 者 的 观察 : 


Function.prototype.unsubscribe = function(publisher) { 
var that = this; 
publisher.subscribers = publisher.subscribers. filter( 
function(el) { 
returnel | === that; 
} 
); 
return this; 


3 


有 些 订阅 者 在 监听 到 某 种 一 次 性 的 事件 之 后 会 在 回调 阶段 立即 退 订 该 事件 。 其 做 法 大 致 如 下 : 


var publisherObject = new Publisher; 


var observerObject = function(data) { 

// process data 

console. log(data) ; 

// unsubscribe from this publisher 

arguments .callee.unsubscribe(publisherObject) ; 


}; 


observerObject.subscribe(publisherObject) ; 


15.3 ”现实 生活 中 的 观察 者 


在 现实 世界 中 ， 观 察 者 模式 对 于 那 种 由 许多 JavaScript 程 序 员 合作 开发 的 大 型 程序 特别 有 用 。 

它 可 以 提高 API 的 灵活 性 ， 使 并 行 开 发 的 多 个 实现 能 够 彼此 独立 地 进行 修改 。 作 为 开发 人 员 ， 你 

可 以 对 自己 的 应 用 程序 中 什么 是 “ 令 人 感 兴趣 的 时 刻 ” 做 出 决定 。 你 所 能 监听 的 不 再 只 是 cl1ick、 

10ad、blur 和 mouseover 等 浏览 器 事件 。 在 富 用 户 界 面 (rich UI) 应 用 程序 中 ， drag ( 拖 动 )、drop 

( 拖 放 )、moved〔( 移 动 )、complete( 完 成) AltabSwitch (标签 切换 ) 都 可 能 是 令 人 感 兴趣 的 事件 。 

它们 都 是 在 普通 浏览 器 事件 的 基础 上 抽象 出 来 的 可 观察 事件 ， 可 由 发 布 者 对 象 向 其 监听 者 广播 。 


15.4 示例 : 动画 


动画 是 在 应 用 程序 中 实现 可 观察 对 象 的 一 个 很 好 的 起 点 。 上 妈 眼 间 你 就 能 想 出 至 少 3 个 可 观察 
到 的 时 刻 : 开始 、 结 束 和 进行 中 。 在 本 例 中 ， 我 们 将 分 别称 之 为 onStart、onComplete 和 onTween。 
下 面 的 代码 演示 了 用 前 面 编写 的 Pub1isher 工 具 实现 这 些 事件 的 过 程 ; 


// Publisher API 

var Animation = function(o) { 
this.onStart = new Publisher, 
this.onComplete = new Publisher, 
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this.onTween = new Publisher; 
}; 
Animation. 
method('fly', function() { 
// begin animation 
this.onStart.deliver(); 
for ( ... ) { // loop through frames 
// deliver frame number 
this.onTween.deliver(i); 


// end animation 
this.onComplete.deliver(); 
}); 


// setup an account with the animation manager 
var Superman = new Animation({...config properties...}); 


// Begin implementing subscribers 
var putOnCape = function(i) { }; 
var takeOffCape = function(i) { }; 


putOnCape. subscribe(Superman.onStart) ; 
takeOffCape. subscribe(Superman.onComplete); 


// fly can be called anywhere 

Superman. fly(); 

// for instance: 

addEvent(element, ‘click’, function() { 
Superman. fly(); 


2 


可 以 看 到 ,如 果 你 是 负责 实现 为 超人 披 上 斗篷 和 和 解 下 斗篷 的 功能 的 人 的 话 ， 这 种 运作 方式 还 
真 不 错 。 借 助 于 发 布 者 ， 你 可 以 知道 超人 什么 时 候 准备 起 飞 以 及 什么 时 候 回 到 地 面 。 你 只 需要 预 
订 这 些 时 刻 的 通知 便 万 事 大 吉 。 [221] 


15.5 “事件 监听 器 也 是 观察 者 


在 DOM 脚 本 编程 环境 中 的 高 级 事件 模式 中 ， 事 件 监听 器 说 到 底 就 是 一 种 内 置 的 观察 者 。 事 
件 处 理 器 (handler) 与 事件 监听 器 (listener) 并 不 是 一 回 事 。 前 者 说 穿 了 就 是 一 种 把 事件 传 给 与 
其 关联 的 函数 的 手段 ”。 而且 在 这 种 模型 中 一 种 事件 只 能 指定 一 个 回调 方法 。 而 在 监听 器 模式 中 ， 
一 个 事件 可 以 与 几 个 监听 器 关联 。 每 个 监听 器 都 能 独立 于 其 他 监听 器 而 改变 。 打 个 比方 ， 对 San 
Francisco Chronicle 这 家 报社 来 说 ， 其 订阅 者 Joe 订 没 订 New York Times 都 无 所 谓 。 同 样 ，Joe 也 不 
在 乎 Lindsay 是 否 也 订 了 San Francisco Chronnicle。 每 一 方 都 只 管 处 理 自己 的 数据 和 相关 的 行为 。 


© 原文 为 “a handler is essentially a means of passing the event along to a function to which it is assigned”。 这 种 说 法 其 
LRA. REDURRE. —— AR 
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例如 ， 使 用 事件 监听 器 ， 可 以 让 多 个 函数 响应 同一 个 事件 : 


// example using listeners 
var element = $(‘example'); 
var fni = function(e) { 

// handle click 
}; 
var fn2 = function(e) { 

// do other stuff with click 
}; 


addEvent(element, ‘click’, fn1); 
addEvent(element, ‘click’, fn2); 


但 用 事件 处 理 器 就 办 不 到 : 


// example using handlers 
var element = document.getElementById('b'); 
var fn1 = function(e) { 

// handle click 


var fn2 = function(e) { 
// do other stuff with click 
j; 


element.onclick = fn1; 
element.onclick = fn2; 


在 第 一 个 例子 中 ， 由 于 使 用 的 是 事件 监听 器 ， 所 以 click 事 件 发 生 时 fn1 和 fn2 都 会 被 调用 。 
而 第 二 个 例子 使 用 的 是 事件 处 理 器 , 其 中 第 二 次 对 onc1ick 赋 值 的 结果 是 fn1 被 fn2 取 代 , 因此 cl1ick 
事件 发 生 时 只 会 调用 fn2， 不 会 调用 fn1l。 

言 归 正 传 。 监 听 器 和 观察 者 之 间 的 共同 之 处 显而易见 。 实 际 上 它们 互 为 同 义 语 。 它 们 都 订阅 
特定 的 事件 ， 然 后 等 待 事件 的 发 生 。 事 件 发 生 时 ， 订 阅 方 的 回调 函数 会 得 到 通知 。 传 给 它们 的 参 
数 是 一 个 事件 对 象 ， 其 中 包含 着 事件 发 生 时 间 、 事 件 类 型 和 事件 发 源 地 等 有 用 的 信息 。 


15.6 ”观察 者 模式 的 适用 场合 


如 果 希 望 把 人 的 行为 和 应 用 程序 的 行为 分 开 ， 那 么 观察 者 模式 正 适 用 于 这 种 场合 。 最 好 不 要 
实现 一 些 与 用 户 操作 绑 在 一 起 而 且 来 源 于 浏览 器 的 东西 ， 比 如 c1ick、mouseover 或 keypress 之 类 
的 基本 DOM 事 件 "。 对 于 那些 只 关心 动画 的 开始 ， 或 者 错别字 的 发 现 〈 在 拼写 检查 应 用 程序 中 ) 
的 程序 员 而 言 ， 那 些 事件 提供 不 了 什么 有 用 信息 。 

举 个 例 来 说 ， 用 户 点 击 导航 系统 的 一 个 标签 (tab) 时 ， 会 打开 一 个 包含 着 更 多 相关 信息 的 


菜单 。 当 然 你 可 以 直接 监听 这 个 cl1ick 事 件 ， 不 过 这 需要 知道 监听 的 是 哪个 元 素 。 这 样 做 的 另 一 


QD 原文 为 “It's best not to implement something that is tied to user interaction and originates from the browser, such as 
basic DOM events like click, mouseover, or keypress”. 坦率 地 说 , 我 认为 这 不 太 说 得 通 。 我 姑且 按 字面 意思 译 出 来 。 
请 读者 自行 判断 。 一 一 译 者 注 
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个 浆 端 是 你 的 实现 与 click 事 件 直 接 绑 在 了 一 起 。 比 监听 click 事 件 更 好 的 做 法 是 : 创建 一 个 可 观 
察 的 onTabChange 对 象 ， 并 且 在 特定 事件 发 生 时 通知 所 有 观察 者 。 如 果菜 单 改 为 在 鼠标 指向 标签 
时 或 者 标签 处 于 焦点 之 下 时 打开 ， 那 么 这 个 onTabChange 对 象 会 替 你 处 理 这 种 改变 "。 


15.7 ”观察 者 模式 之 利 


观察 者 模式 是 开发 基于 行为 (action-based) 的 大 型 应 用 程序 的 有 力 手 段 。 在 一 次 浏览 器 会 话 
期 间 ， 应 用 程序 中 可 能 会 断断续续 地 发 生 几 十 次 、 几 百 次 甚至 几 千 次 各 种 事件 。 你 可 以 削减 为 事 
件 注册 监听 器 的 次 数 ， 让 可 观察 对 象 借助 一 个 事件 监听 器 替 你 处 理 各 种 行为 并 将 信息 委托 
(delegate) 给 它 的 所 有 订阅 者 ， 从 而 降低 内 存 消 耗 和 提高 互动 性 能 。 这 样 一 来 ， 就 不 用 没完 没 了 
地 为 同样 的 元 素 增添 新 的 事件 监听 器 ， 这 有 利于 减少 系统 开销 并 提高 程序 的 可 维护 性 。 


15.8 ”观察 者 模式 之 紫 


使 用 这 种 观察 者 接口 的 一 个 不 利之 处 在 于 创建 可 观察 对 象 所 带 来 的 加 载 时 间 开 销 。 这 可 以 通 
过 使 用 情 性 加 载 技术 加 以 化 解 , 具体 而 言 就 是 把 新 的 可 观察 对 象 的 实例 化 推迟 到 需要 发 送 事件 通 
知 的 时 候 。 这 样 一 来 ,订阅 者 在 事件 尚未 创建 的 时 候 就 能 订阅 它 ， 应 用 程序 的 初始 加 载 时 间 也 就 
不 会 受到 影响 。 


15.9 小结 


观察 者 模式 是 对 应 用 系统 进行 抽象 的 有 力 手 段 。 你 可 以 定义 一 些 事件 供 其 他 开发 人 员 使 用 ， 
而 并 不 需要 为 此 深入 了 解 他 们 的 代码 。 一 个 事件 可 以 被 5 个 订阅 者 订阅 ， 而 一 个 订阅 者 也 可 以 订 
阅 5 个 不 同 的 事件 。 对 于 浏览 器 这 类 互动 环境 来 说 这 非常 理想 。 现 在 的 Web 应 用 程序 越 来 越 大 ， 
在 此 背景 下 ， 作 为 一 种 提高 代码 的 可 维护 性 和 简洁 性 的 有 力 手段 ， 可 观察 对 象 的 作用 更 显 突出 。 
这 种 模式 的 应 用 有 助 于 防止 第 三 方 开发 人 员 和 合作 伙伴 因为 对 你 的 应 用 程序 的 细节 了 解 得 太 多 
而 把 事情 搞 糟 。 实 践 一 下 观察 者 模式 吧 ， 这 可 以 给 你 的 朋友 和 上 司 留 下 深刻 印象 。 

在 Publisher 那 个 工具 中 ， 我 们 开发 的 是 一 种 “ 推 ” 系 统 。 发 布 者 广播 事件 的 方式 是 把 数据 
推 给 每 个 订阅 者 。 你 可 以 自己 尝试 写 个 工具 ， 让 每 个 订阅 者 从 发 布 者 那里 “ 拉 ” 数 据 。 我 们 可 以 
给 你 一 点 提示 : 先 为 订阅 者 实现 一 个 “ 拉 ” 方 法 ， 该 方法 以 一 个 Publisher 对 象 为 参数 。 


@ 也 即 ， 只 需要 为 此 修改 onTabChange 的 实现 细节 即 可 ， 不 必修 改 onTabChange 的 观察 者 。 一 一 译 者 注 
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章 研 究 的 是 一 种 封装 方法 调用 的 方式 。 命 令 模式 与 普通 函数 有 所 不 同 。 它 可 以 用 来 对 
方法 调用 进行 参数 化 处 理 和 传送 ， 经 这 样 处 理 过 的 方法 调用 可 以 在 任何 需要 的 时 候 执 
行 。 它 也 可 以 用 来 消除 调用 操作 Caction) 的 对 象 和 实现 操作 的 对 象 之 间 的 耦合 ， 这 为 各 种 具体 
的 类 的 更 换 带 来 了 极 大 的 灵活 性 。 这 种 模式 可 以 用 在 许多 不 同 场合 , 不 过 它 在 创建 用 户 界面 这 一 
方面 非常 有 用 ， 特 别 是 在 需要 不 受 限 的 (unlimited) 取消 《undo) 操作 的 时 候 。 它 还 可 以 用 来 替 
代 回 调 函数 ， 因 为 它 能 够 提高 在 对 象 之 间 传 递 的 操作 的 模块 化 程度 。 
在 后 面 的 儿 节 中 , 我 们 将 讨论 命令 模式 的 结构 , 并 提供 一 些 演示 其 在 JavaScript 中 的 用 法 的 示 
例 。 我 们 还 会 指出 哪些 地 方 最 适合 使 用 命令 模式 ， 以 及 哪些 场合 不 应 该 使 用 它 。 


16.1 命令 的 结构 


最 简 形 式 的 命令 对 象 是 一 个 操作 和 用 以 调用 这 个 操作 的 对 象 的 结合 体 。 所 有 的 命令 对 象 都 有 
一 个 执行 操作 Cexecute operation)， 其 用 途 就 是 调用 命令 对 象 所 绑 定 的 操作 〈action )。 在 大 多 数 
命令 对 象 中 ， 这 个 操作 是 一 个 名 为 execute 或 run 的 方法 。 使 用 同样 接口 的 所 有 命令 对 象 都 可 以 被 
同等 对 待 ， 并 且 可 以 随意 互 换 。 这 是 命令 模式 的 魅力 之 一 。 

为 了 演示 命令 模式 的 典型 用 法 ， 我 们 来 考察 一 个 有 关 动 态 用 户 界 面 的 例子 。 假设 你 有 一 个 广 
告 公 司 ， 你 想 设 计 一 个 网 页 ， 客户 可 以 在 上 面 执行 一 些 与 自己 的 账户 相关 的 操作 ， 比 如 启用 和 停 
用 某 些 广告 。 因 为 不 知道 其 中 的 具体 广告 数量 ， 所 以 你 想 设 计 一 个 尽 可 能 灵活 的 用 户 界面 CUD. 
为 此 你 打算 用 命令 模式 来 弱化 按钮 之 类 的 用 户 界面 元 素 与 其 操作 之 间 的 耦合 。 

首先 要 做 的 是 定义 一 个 所 有 命令 对 象 都 必须 实现 的 接口 ， 


/* AdCommand interface. */ 


var AdCommand = new Interface('AdCommand' , [ ‘execute’ ]); 


接 下 来 需要 定义 两 个 类 ， 分 别 用 来 封装 广 告 的 start 方 法 和 stop 方 法 : 


/* StopAd command class. */ 


var StopAd = function(adObject) { // implements AdCommand 
this.ad = adObject; 


StopAd.prototype.execute = function() { 
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this.ad.stop(); 


2 
/* StartAd command class. */ 


var StartAd = function(adObject) { // implements AdCommand 
this.ad = adObject; 

}; 

StartAd.prototype.execute = function() { 
this.ad.start(); 


3 


这 是 两 个 非常 典型 的 命令 类 。 它 们 的 构造 函数 以 另 一 个 对 象 为 参数 ， 而 它们 实现 的 execute 
方法 则 要 调用 该 对 象 的 某 个 方法 。 现 在 有 了 两 个 可 用 在 用 户 界面 中 的 类 ， 它 们 具有 相同 的 接口 。 
你 不 知道 也 不 关心 ad0bject 的 具体 实现 细节 ， 只 要 它 实现 了 start 和 stop 方 法 就 行 。 借 助 于 命令 模 
式 ， 可 以 实现 用 户 界面 对 象 与 广告 对 象 的 隔离 。 

下 面 的 代码 创建 的 用 户 界面 中 ,， 用户 名 下 的 每 个 广告 都 有 两 个 按钮 ， 分 别 用 于 启动 和 停止 广 
告 的 轮 播 : 


/* Implementation code. */ 


var ads = getAds(); 

for(var i = 0, len = ads.length; i < len; i++) { 
// Create command objects for starting and stopping the ad. 
var startCommand = new StartAd(ads[i]); 
var stopCommand = new StopAd(ads[i]); 


// Create the UI elements that will execute the command on click. 
new UiButton('Start ' + ads[i].name, startCommand); 
new UiButton('Stop ' + ads[i].name, stopCommand) ; 


} 

UiButton 类 的 构造 函数 有 两 个 参数 ， 一 个 是 按钮 上 的 文字 ， 另 一 个 是 命令 对 象 。 它 会 在 网 页 
上 生成 一 个 按钮 ， 该 按钮 被 点 击 时 会 执行 那个 命令 对 象 的 execute 方 法 。 这 个 类 也 不 需要 知道 所 
用 命令 对 象 的 确切 实现 。 因 为 所 有 命令 对 象 都 实现 了 execute 方 法 ， 所 以 可 以 把 任何 一 种 命令 对 
象 提供 给 UiButton， 后 者 应 该 知道 如 何 跟 它 打交道 。 这 有 助 于 创建 高 度 模块 化 和 低 度 耦 合 的 用 户 
界面 。 


16.1.1 用 闭 包 创建 命令 对 象 


还 有 另外 一 种 办 法 可 以 用 来 封装 函数 。 这 种 办 法 不 需要 创建 一 个 具有 execute 方 法 的 对 象 ， 
而 是 把 想 要 执行 的 方法 包装 在 闭 包 中 。 如 果 想 要 创建 的 命令 对 象 像 前 例 中 那样 只 有 一 个 方法 , 那 
么 这 种 办 法 尤其 方便 。 现 在 你 不 再 调用 execute 方 法 ， 因 为 那个 命令 可 以 作为 函数 直接 执行 。 这 
样 做 还 可 以 省 却 作 用 域 和 this 关 键 字 的 绑 定 这 方面 的 烦恼 。 

下 面 的 代码 用 这 种 技术 重 写 了 前 面 的 例子 : 
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/* Commands using closures. */ 


function makeStart(adObject) { 
return function() { 
adObject.start(); 
}; 
} 
function makeStop(adObject) { 
return function() { 
adObject.stop(); 


2 


} 
/* Implementation code. */ 


var startCommand = makeStart(ads[0]); 
var stopCommand = makeStop(ads[0]); 


startCommand(); // Execute the functions directly instead of calling a method. 
stopCommand() ; 


这 些 命令 函数 可 以 像 命 令 对 象 一 样 四 处 传递 , 并 且 在 需要 的 时 候 执 行 。 它们 是 正式 的 命令 对 象 
类 的 简单 替代 品 ,但 并 不 适合 于 需要 多 个 命令 方法 的 场合 , 比如 本 章 后 面 实现 取消 功能 的 那个 示例 。 


16.1.2 客户、 调用 者 和 接收 者 


到 此 你 对 命令 模式 已 经 有 了 一 个 大 概 了 解 , 现在 我 们 再 做 点 正式 说 明 。 这 个 系统 中 有 三 个 参 
与 者 : 客户 (client)、 调 用 者 (invoking object) 和 接收 者 (receiving object)。 客 户 负 责 实例 化 命 
令 并 将 其 交 给 调用 者 。 在 前 面 的 例子 中 ，for 循 环 中 的 代码 就 是 客户 。 它 通常 被 包装 为 一 个 对 象 ， 
但 也 不 是 非 这 样 不 可 。 调 用 者 接 过 命令 并 将 其 保存 下 来 。 它 会 在 某 个 时 候 调 用 该 命令 对 象 的 
execute 方 法 ， 或 者 将 其 交 给 另 一 个 潜在 的 调用 者 。 前 例 中 的 调用 者 就 是 UiButton 类 创建 的 按钮 。 
用 户 点 击 它 的 时 候 ， 它 就 会 调用 命令 对 象 的 execute 方 法 。 接 收 者 则 是 实际 执行 操作 的 对 象 。 调 
用 者 进行 “command0bject.execute() ”这 种 形式 的 调用 时 ， 它 所 调用 的 方法 将 转 而 以 


“receiver.action()” 这 种 形式 调用 恰当 的 方法 。 前 例 中 的 接收 者 就 是 广告 对 象 ， 它 所 能 执行 的 


操作 要 么 是 start 方 法 ， 要 么 是 stop 方 法 。 

什么 参与 者 执行 什么 任务 有 时 不 太 好 记 。 这 里 再 重复 一 遍 : 客户 创建 命令 ; 调用 者 执行 该 命 
令 ; 接收 者 在 命令 执行 时 执行 相应 操作 。 除 客户 外 的 其 他 两 个 参与 者 的 名 称 在 一 定 程度 上 揭示 了 
其 作用 ， 这 有 助 于 记忆 。 

所 有 使 用 命令 模式 的 系统 都 有 客户 和 调用 者 ， 但 不 一 定 有 接收 者 。 有 些 复杂 (但 是 模块 化 程 
度 较 低 ) 的 命令 并 不 调用 接收 者 的 方法 ， 而 是 自己 执行 一 些 复杂 查询 或 命令 。 我 们 将 在 16.2 节 中 
详细 讨论 这 种 类 型 的 命令 。 


16.1.3 ”在 命令 模式 中 使 用 接口 
命令 模式 需要 用 到 某 种 类 型 的 接口 。 接 口 的 作用 在 于 确保 接收 者 实现 了 所 需要 的 操作 ， 以 及 
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命令 对 象 实现 了 正确 的 执行 操作 〈 它 可 能 有 各 种 各 样 的 名 称 ， 不 过 通常 叫 execute、run， 在 某 些 
情况 下 也 可 能 叫 undo)。 不 进行 这 种 检查 的 代码 会 比较 脆弱 ， 容 易 在 运行 期 间 出 现 很 难 排查 的 错 
误 。 你 可 以 在 自己 的 代码 中 统一 定义 一 个 Command 接 口 ， 但 凡 使 用 命令 对 象 的 地 方 ， 都 要 检查 它 
是 否 实现 了 这 个 接口 。 这 样 一 来 ， 其 中 所 有 命令 对 象 的 执行 操作 都 具有 相同 的 名 称 ， 因 此 无 需 修 
改 即 可 交换 使 用 。 这 个 接口 大 体形 如 : 


/* Command interface. */ 


var Command = new Interface('Command', ['execute']); 


有 了 这 个 接口 ， 你 就 可 以 用 类 似 于 下 面 的 代码 检查 命令 对 象 是 否 实现 了 正确 的 执行 操作 : 
/* Checking the interface of a command object. */ 
// Ensure that the execute operation is defined. If not, a descriptive exception 


// will be thrown. 
Interface.ensureImplements(someCommand, Command); 


// If no exception is thrown, you can safely invoke the execute operation. 
someCommand.execute(); 


如 果 用 闭 包 来 创建 命令 函数 , 那么 这 种 检查 甚至 更 简单 , 只 需要 检查 该 命令 是 否 为 函数 即 可 : 


If(typeof someCommand != 'function') { 
throw new Error('Command isn't a function’); 


} 
在 第 一 组 示例 中 ， 为 了 简单 起 见 ， 并 没有 进行 接口 检查 。 但 本 章 后 面 的 示例 都 进行 了 这 种 检 
查 。 我 们 强烈 建议 你 也 使 用 接口 检查 。 


16.2 命令 对 象 的 类 型 


所 有 类 型 的 命令 对 象 执行 的 都 是 同样 的 任务 : 隔离 调用 操作 的 对 象 与 实际 实施 操作 的 对 象 。 
这 个 定义 所 涵盖 的 区 间 有 两 种 极端 情况 。 前 面 创建 的 那 种 命令 对 象 属于 区 间 的 一 端 ， 这 种 情况 下 
的 命令 对 象 所 起 的 作用 只 不 过 是 把 现 有 接收 者 的 操作 (广告 对 象 的 start 和 stop 方 法 ) 与 调用 者 
《按钮 ) 绑 定 在 一 起 。 这 类 命令 对 象 最 简单 ， 其 模块 化 程度 也 最 高 。 它 们 与 客户 、 = 
者 之 间 只 是 松散 地 耦合 在 一 起 : 


/* SimpleCommand, a loosely coupled, simple command class. */ 


var SimpleCommand = function(receiver) { // implements Command 
this.receiver = receiver; 
}; 
SimpleCommand.prototype.execute = function() { 
this.receiver.action(); 
}; 
位 于 区 间 另 一 端的 则 是 那 种 封装 着 一 套 复杂 指令 的 命令 对 象 。 这 种 命令 对 象 实际 上 没有 接收 
者 ， 因 为 它 自己 提供 了 操作 的 具体 实现 。 它 并 不 把 操作 委托 给 接收 者 实现 ， 所 有 用 于 实现 相关 操 


作 的 代码 都 包含 在 其 内 部 : 
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/* ComplexCommand, a tightly coupled, complex command class. */ 


var ComplexCommand = function() { // implements Command 
this. logger = new Logger(); 
this.xhrHandler = XhrManager.createXhrHandler(); 
this.parameters = {}; 

}; 

ComplexCommand.prototype = { 
setParameter: function(key, value) { 

this.parameters[key] = value; 


execute: function() { 
this.logger.log('Executing command' ); 
var postArray = []; 
for(var key in this.parameters) { 

postArray.push(key + '=' + this.parameters[key]); 

var postString = postArray. join('&'); 
this.xhrHandler. request ( 

"POST", 

"script.php', 

function() {}, 

postString 

); 
} 

}; 


在 这 两 种 极端 之 间 存 在 一 个 灰色 地 带 。 有 些 命令 对 象 不 但 封装 了 接收 者 的 操作 ， 而 且 其 
execute 方 法 中 也 具有 一 些 实现 代码 。 这 类 命令 对 象 位 于 定义 区 间 的 中 间 地 段 : 


/* GreyAreaCommand, somewhere between simple and complex. */ 


var GreyAreaCommand = function(receiver) { // implements Command 
this. logger = new Logger(); 
this.receiver = receiver; 
}; 
GreyAreaCommand.prototype.execute = function() { 
this. logger. log('Executing command’); 
this.receiver.prepareAction(); 
this.receiver.action(); 
}; 
这 些 类 型 的 命令 对 象 各 有 各 的 用 处 ， 它 们 都 能 在 项 目 中 找到 自己 的 位 置 。 简 单 命令 对 象 一 般 
用 来 消除 两 个 对 象 〈 接 收 者 和 调用 者 ) 之 间 的 耦合 ， 而 复杂 命令 对 象 则 一 般 用 来 封装 不 可 分 的 


(atomic) 或 事务 性 (transactional) 的 指令 。 本 章 着 重 讨论 简单 命令 对 象 。 


16.3 示例 : 菜单 项 


这 个 示例 演示 了 如 何 用 最 简 类 型 的 命令 对 象 构建 模块 化 的 用 户 界面 ,我们 将 设计 一 个 用 来 生成 
朱 面 应 用 程序 风格 的 菜单 栏 的 类 ,并 且 通 过 使 用 命令 对 象 ， 让 这 些 菜单 执行 各 种 各 样 的 操作 。 借 助 
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于 命令 模式 ,我 们 可 以 把 调用 者 (菜单 项 ) 与 接收 者 〈 实 际 执行 操作 的 对 象 ) 隔离 开 。 那 些 菜单 项 
不 必 了 解 接收 者 的 用 法 ， 它 们 只 要 知道 所 有 命令 对 象 都 实现 了 一 个 execute 方 法 就 行 。 这 意味 着 同 
样 的 命令 对 象 也 可 以 被 工具 栏 图 标 等 其 他 用 户 界面 元 素 使 用 ， 而 且 并 不 需要 为 此 进行 修改 。 

这 里 没有 给 出 接收 者 类 的 实现 代码 。 其 出 发 点 在 于 你 只 需要 知道 接收 者 有 些 什么 操作 可 供 调 
用 即 可 。 图 16-1 显 示 了 各 种 接收 者 类 及 其 实现 的 方法 。 


SC LAL UTES 


+ a. 
textBlock( 





图 16-1 接收 者 类 支持 的 方法 


前 面 说 过 ,接口 在 命令 模式 中 起 着 非常 重要 的 作用 。 这 种 作用 在 本 例 中 尤其 突出 ,这 是 因为 
我 们 还 要 为 菜单 使 用 组 合 模式 ， 而 组 合 对 象 又 严重 依赖 于 接口 。 本 例 定义 了 三 个 接口 : 


/* Command, Composite and Menu0bject interfaces. */ 


var Command = new Interface('Command', ['execute']); 

var Composite = new Interface('Composite', ['add', ‘remove’, "getChild’, 
"getElement']); 

var MenuObject = new Interface('MenuObject', ['show']); 


16.3.1 菜单 组 合 对 象 


接 下 来 要 实现 的 是 MenuBar、Menu 和 MenuItem 类 。 作为 一 个 整体 , 它们 要 能 显示 所 有 可 用 操作 ， 
并 且 根 据 要 求 调用 这 些 操作 。MenuBar 和 Menu 都 是 组 合 对 象 类 ， 而 MenuItem 则 是 叶 类 。 MenuBar 类 
保存 着 所 有 的 Menu 实 例 : 


/* MenuBar class, a composite. */ 


var MenuBar = function() { // implements Composite, MenuObject 
this.menus = {}; 
this.element = document.createElement('ul'); 
this.element.style.display = ‘none’; 
}; 
MenuBar.prototype = { 
add: function(menuObject) { 
Interface.ensureImplements(menuObject, Composite, MenuObject); 
this.menus[menuObject.name] = menuObject; 
this.element .appendChild( this .menus[menuObject .name].getElement()); 
}, 
remove: function(name) { 
delete this.menus[name]; 


}, 
getChild: function(name) { 
return this.menus[name]; 
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b 
getElement: function() { 
return this.element; 


}, 


show: function() { 
this.element.style.display = ‘block’; 
for(name in this.menus) { // Pass .the call down the composite. 
this.menus[name].show(); 
} 
} 
J; 


MenuBar 是 一 个 很 简单 的 组 合 对 象 类 。 它 会 生成 一 个 无 序列 表 标签 ， 并 且 提 供 了 向 这 个 列表 
中 添加 菜单 对 象 的 方法 。Menu 类 与 此 大 体 类 似 ， 不 过 它 管理 的 是 MenuItem 实 例 : 


/* Menu class, a composite. */ 


var Menu = function(name) { // implements Composite, MenuObject 
this.name = name; 
this.items = {}; 
this.element = document.createElement('li'); 
this.element.innerHTML = this.name; 
this.element.style.display = ‘none’; 
this.container = document.createElement(‘ul'); 
this.element.appendChild(this.container) ; 
}; 
Menu.prototype = { 
add: function(menuItem0bject) { 
Interface.ensureImplements(menuItem0bject, Composite, MenuObject); 
this.items[menultemObject.name] = menultemObject; 
this.container.appendChild(this.items[menultemObject.name].getElement()); 
}, 
remove: function(name) { 
delete this.items[name] ; 
}, 
getChild: function(name) { 
return this.items[name] ; 
}, 
getElement: function() { 
return this.element; 


h 


show: function() { 
this.element.style.display = 'block'; 
for(name in this.items) { // Pass the call down the composite. 
this.items[name].show(); 
} 
} 
}; 
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值得 一 提 的 是 ，Menu 类 的 items 属 性 只 起 着 一 个 查找 表 的 作用 ， 它 不 会 保存 菜单 项 的 次 序 信 
息 。 菜 单项 的 次 序 由 DOM 负 责 保 持 。 每 一 条 新 添加 的 菜单 项 ， 都 被 添加 在 已 有 菜单 项 之 后 。 如 
果 要 求 能 对 菜单 项 的 次 序 进行 重 排 ， 那 么 可 以 把 items 属 性 实现 为 数组 。 

真正 让 人 感 兴 趣 的 是 MenuItem 类 。 这 是 系统 中 的 调用 者 类 。MenuItem 的 实例 被 用 户 点 击 时 ， 
会 调用 与 其 绑 定 在 一 起 的 命令 对 象 。 为 此 需要 先 确保 传 入 构造 函数 的 命令 对 象 实现 了 execute 方 
法 ， 然 后 再 在 为 MenuItem 对 象 对 应 的 锚 标 签注 册 的 click 事 件 处 理 器 中 加 入 调用 它 的 语句 : 


/* MenuItem class, a leaf. */ 


var MenuItem = function(name, command) { // implements Composite, MenuObject 
Interface.ensureImplements(command, Command); 
this.name = name; 
this.element = document.createElement('1li'); 
this.element.style.display = ‘none’; 
this.anchor = document.createElement(‘a'); 
this.anchor.href = '#'; // To make it clickable. 
this.element.appendChild(this.anchor) ; 
this.anchor.innerHTML = this.name; 


addEvent(this.anchor, 'click', function(e) { // Invoke the command on click. 
e.preventDefault(); 
command .execute( ) ; 


}); 


3 
MenuItem.prototype = { 
add: function() {}, 
remove: function() {}, 
getChild: function() {}, ` 
getElement: function() { 
return this.element; 


}, 


show: function() { 
this.element.style.display = 'block'; 


}; 

命令 模式 的 作用 在 此 开始 显现 出 来 。 你 可 以 创建 一 个 包含 着 许多 菜单 的 非常 复杂 的 菜单 栏 ， 
而 每 个 菜单 都 包含 着 一 些 菜单 项 。 这 些 菜单 项 对 如 何 执行 自己 所 绑 定 的 操作 一 无 所 知 ， 它 们 也 不 
需要 知道 那些 细节 。 它 们 唯一 需要 知道 的 就 是 命令 对 象 有 一 个 execute 方 法 。 

每 个 MenuItem 都 与 一 个 命令 对 象 绑 定 在 一 起 。 这 个 命令 对 象 不 能 天 改变 ， 因 为 它 被 封装 在 一 
个 事件 监听 器 的 闭 包 中 。 如 果 想 改变 菜单 项 所 绑 定 的 命令 , 必须 另外 创建 一 个 新 的 MenuItem 对 象 。 


16.3.2 命令 类 


MenuCommand 这 个 命令 类 非常 简单 ， 几乎 没有 比 这 更 简单 的 命令 类 了 。 其 构造 函数 的 参数 就 是 
将 被 作为 操作 而 调用 的 方法 。 因 为 JavaScript 可 以 把 对 方法 的 引用 作为 参数 传递 , 所 以 命令 类 只 要 
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把 这 个 引用 保存 下 来 ， 然 后 在 execute 方 法 的 执行 过 程 中 调用 它 即 可 。 这 实际 上 就 是 一 个 函数 的 
包装 对 象 。 


/* MenuCommand class, a command object. */ 


var MenuCommand = function(action) { // implements Command 
this.action = action; 

b 

MenuCommand.prototype.execute = function() { 
this.action(); 


}; 
如 果 action 方 法 内 部 需要 用 到 this 关 键 字 ， 那 么 它 必 须 被 包装 在 一 个 匿名 函数 中 。 如 下 所 示 ? 


var someCommand = new MenuCommand(function() { myObj.someMethod(); }); 


16.3.3 汇合 起 来 


这 个 复杂 架构 的 最 终结 果 中 的 实现 代码 很 容易 理解 ， 其 各 个 部 分 之 间 的 耦合 也 比较 松散 。 你 
需要 做 的 就 是 创建 MenuBar 类 的 一 个 实例 ， 然 后 为 它 添加 一 些 Menu 和 MenuItem 对 象 。 其 中 每 个 
MenuItem 对 象 都 绑 定 了 一 个 命令 对 象 : 


/* Implementation code. */ 


/* Receiver objects, instantiated from existing classes. */ 
var fileActions = new FileActions(); 

var editActions = new EditActions(); 

var insertActions = new InsertActions(); 

var helpActions = new HelpActions(); 


/* Create the menu bar. */ 
var appMenuBar = new MenuBar(); 


/* The File menu. */ 
var fileMenu = new Menu(‘File'); 


var openCommand = new MenuCommand(fileActions.open) ; 
var closeCommand = new MenuCommand(fileActions.close); 
var saveCommand = new MenuCommand(fileActions.save) ; 
var saveAsCommand = new MenuCommand(fileActions.saveAs); 


O 作者 的 这 句 话 非常 含混 。 这 个 问题 的 实质 是 ， 作 为 参数 传递 给 MenuCommand 的 构造 函数 的 那个 函数 内 部 不 应 该 使 
用 this 关 键 字 。 如 果 一 个 函数 内 部 使 用 了 this， 那 么 这 就 意味 着 其 设计 者 希望 它 被 作为 一 个 对 象 的 方法 调用 ， 而 
不 是 作为 一 个 普通 函数 调用 。 在 本 例 中 ， 如 果 用 作 MenuCommand 构 造 函 数 的 参数 那个 函数 内 部 使 用 了 this 的 话 ， 
那么 在 execute 方 法 内 部 调用 它 时 ,这 个 this 实 际 上 指向 的 是 所 生成 的 那个 MenuCommand 实 例 , 这 基本 上 不 可 能 是 
该 函数 设计 者 的 初衷 。 如 果 想 用 MenuCommand 包 装 一 个 名 为 someMethod 的 函数 ， 但 又 希望 调用 其 exetute 方 法 的 结 
果 是 把 SomeMethod 函 数 作 为 另外 某 个 对 象 的 方法 调用 ， 那 么 提供 给 MenuComrmand 构 造 函 数 的 参数 就 不 能 是 
someMethod， 而 应 该 是 另外 一 个 新 函数 ， 这 个 函数 内 部 将 把 someMethod 作 为 那个 对 象 〈 该 对 象 可 以 通过 闭 包 机 制 
而 被 引用 到 ) 的 方法 调用 。 一 一 译 者 注 
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fileMenu.add(new MenuItem('Open', openCommand)); 
fileMenu.add(new Menultem('Close', closeCommand)); 
fileMenu.add(new MenuItem('Save', saveCommand)); 
fileMenu.add(new MenuItem('Save As...', saveAsCommand)); 


appMenuBar. add(fileMenu) ; 


/* The Edit menu. */ 
var editMenu = new Menu('Edit'); 


var cutCommand = new MenuCommand(editActions.cut); 

var copyCommand = new MenuCommand(editActions.copy); 

var pasteCommand = new MenuCommand(editActions.paste) ; 
var deleteCommand = new MenuCommand(editActions.delete); 


editMenu.add(new MenuItem('Cut', cutCommand)); 
editMenu.add(new MenuItem('Copy', copyCommand)); 
editMenu.add(new MenuItem('Paste', pasteCommand)); 
editMenu.add(new MenuItem('Delete', deleteCommand)); 


appMenuBar..add(editMenu) ; 


/* The Insert menu. */ 
var insertMenu = new Menu('Insert'); 


var textBlockCommand = new MenuCommand(insertActions.textBlock); 
insertMenu.add(new MenuItem('Text Block’, textBlockCommand)); 


appMenuBar. add(insertMenu) ; 


/* The Help menu. */ 
var helpMenu = new Menu( ‘Help'); 


var showHelpCommand = new MenuCommand(helpActions .showHelp) ; 
helpMenu.add(new MenuItem('Show Help’, showHelpCommand)) ; 


appMenuBar . add(helpMenu) ; 


/* Build the menu bar. */ 
document . getElement sByTagName( 'body' )[0].appendChild(appMenuBar.getElement()); 
appMenuBar. show() ; 


16.3.4 ”添加 更 多 菜单 项 


要 是 以 后 想 为 菜单 再 增添 一 些 菜单 项 , 这 很 容易 办 到 。 例如 ， 区 区 如 下 两 行 代码 就 能 在 Insert 
菜单 中 添加 一 个 图 像 命 令 (假设 InsertActions 类 已 实现 了 需要 的 操作 );: 


var imageCommand = new MenuCommand(insertActions. image); 
insertMenu.add(new MenuItem('Image', imageCommand)) ; 


这 个 菜单 系统 实现 了 接受 用 户 请 求 的 对 象 与 实现 相关 操作 的 对 象 的 隔离 。 命令 模式 非常 适合 
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用 来 构建 用 户 界面 ， 这 是 因为 这 种 模式 可 以 把 执行 具体 工作 的 类 与 生成 用 户 界面 的 类 隔离 开 来 。 
在 这 种 模式 中 ,甚至 可 以 让 多 个 用 户 界面 元 素 共用 同一 个 接收 者 或 命令 对 象 。 既然 命令 可 以 作为 
一 等 对 象 进 行 传递 和 重用 ， 那 么 它 自然 应 该 能 够 反复 执行 一 一 甚至 是 被 不 同 的 调用 者 反复 执行 。 


16.4 示例 : 取消 操作 和 命令 日 志 


还 有 一 个 方法 也 经 常 被 实现 为 命令 对 象 ， 那 就 是 undo。 借 助 这 个 方法 ， 调用 者 可 以 回 滚 用 
execute 执 行 的 操作 。undo 方 法 可 以 用 来 实现 不 受 限 制 的 取消 功能 。 只 需要 把 执行 过 的 命令 对 象 
压 入 栈 项 即 可 实现 对 命令 执行 历史 的 记录 。 如 果 用 户 想 撤销 最 近 的 操作 ， 他 可 以 点 击 “ 取 消 ” 按 
钮 ， 这 会 从 栈 中 弹出 最 近 那 个 命令 并 调用 该 命令 的 undo 方 法 。 用 户 可 以 这 样 取消 先前 执行 过 的 所 
有 操作 ， 直 到 栈 底 。 

为 了 演示 用 命令 模式 实现 不 受 限 制 的 取消 操作 的 方法 ， 我 们 下 面 要 设计 一 个 类 似 于 Etch A 
Sketch 的 游戏 "。 游 戏 界面 中 有 四 个 移动 按钮 ， 其 功能 分 别 是 把 指针 向 上 、 下 、 左 、 右 4 个 方向 移 
动 10 个 像素 。 此 外 还 有 一 个 取消 按钮 ， 它 可 以 用 来 撤销 操作 。 首先 我 们 必须 修改 一 下 Command 接 


[235] O, 为 其 添加 一 个 undo 方 法 : 


/* ReversibleCommand interface. */ 


var ReversibleCommand = new Interface('ReversibleCommand', ['execute’, "undo']); 


接 下 来 要 做 的 是 创建 4 个 命令 类 ， 它 们 分 别 用 来 向 上 、 下 、 左 、 右 4 个 方向 移动 指针 : 


/* Movement commands. */ 


var MoveUp = function(cursor) { // implements ReversibleCommand 
this.cursor = cursor; 
}; 
MoveUp.prototype = { 
execute: function() { 
Cursor.move(0, -10); 


2 
undo: function() { 
cursor.move(0, 10); 


}; 


var MoveDown = function(cursor) { // implements ReversibleCommand 
this.cursor = cursor; 


}; 
MoveDown.prototype = { 
execute: function() { 





O 这 是 一 种 儿童 玩具 ， 国 内 有 人 称 为 “魔术 画板 ”。 经 典 的 Etch A Sketch 是 一 块 中 空 的 平板 ， 内 装 一 些 金属 粉末 。 其 
正面 大 部 分 履 盖 着 一 块 透 明 的 有 机 玻璃 薄板， 在 下 边 左右 两 角 各 有 一 个 控制 手柄 。 将 正面 朝 下 抖动 平板 ， 即 可 让 
金属 粉末 均匀 地 吸附 在 有 机 玻璃 内 表面 。 然后 儿童 可 以 通过 操纵 两 个 手柄 控 制 平板 内 部 的 一 个 笔尖 移动 。 笔 尖 移 
动 路 线 上 的 金属 粉 未 会 被 刮 落 ， 从 而 显 出 线条 。 一 一 译 者 注 
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cursor.move(0, 10); 
}s 
undo: function() { 
cursor.move(0, -10); 
} 
} 


var MoveLeft = function(cursor) { // implements ReversibleCommand 
this.cursor = cursor; 
}; 
MoveLeft.prototype = { 
execute: function() { 
cursor.move(-10, 0); 
}, 
undo: function() { 
cursor.move(10, 0); 
} 
}; 


var MoveRight = function(cursor) { // implements ReversibleCommand 


this.cursor = cursor; [236] 
}; 


MoveRight.prototype = { 
execute: function() { 
cursor.move(10, 0); 
}, 
undo: function() { 
cursor.move(-10, 0); 
} 
}; 
这 些 代码 很 简单 。execute 方 法 向 合适 的 方向 移动 指针 ， 而 undo 方 法 则 向 相向 的 方向 把 指针 
移 回去 。 这 是 一 个 相当 典型 的 带 取消 功能 的 命令 。 相 关 的 操作 必须 易于 逆转 ， 而 且 不 用 知道 系统 
原来 的 状态 。 


最 后 , 我 们 还 需要 有 用 作 调 用 者 的 按钮 和 实际 负责 实现 指针 移动 的 接收 者 。 先 来 看 看 接收 者 ; 


/* Cursor class. */ 


var Cursor = function(width, height, parent) { 
this.width = width; 
this.height = height; 
this.position = { x: width / 2, y: height / 2 }; 


this.canvas = document.createElement( 'canvas'); 
this.canvas.width = this.width; 
this.canvas.height = this.height; 

parent .appendChild(this.canvas); 


this.ctx = this.canvas.getContext('2d'); 
this.ctx.fillStyle = '#cc0000'; 
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this.move(0, 0); 

}; 

Cursor.prototype.move = function(x, y) { 
this.position.x += x; 
this.position.y += y; 


this.ctx.clearRect(0, 0, this.width, this.height); 
this.ctx.fillRect(this.position.x, this.position.y, 3, 3); 


, 


Cursor 类 实现 了 命令 类 所 要 求 的 操作 。 本 例 中 涉及 的 操作 只 不 过 是 在 特定 位 置 绘制 一 个 方 
块 。 调 用 命令 的 是 网 页 上 的 按钮 。 本 例 需 要 的 按钮 有 两 种 : 一 种 是 用 来 调用 execute 方 法 的 命令 
按钮 ， 另 一 种 是 用 来 调用 undo 方 法 的 取消 按钮 。 

在 讲 按钮 类 之 前 ， 先 来 看 看 如 何 用 装饰 者 模式 进一步 提高 命令 类 的 模块 化 程度 。 我 们 需要 在 
系统 中 的 某 个 地 方 加 入 一 些 用 来 把 执行 过 的 命令 压 入 栈 的 代码 。 这 些 代码 可 以 写 在 用 户 界 面 类 
( 即 按钮 类 ) 中 ， 但 这 样 一 来 就 必须 在 每 一 个 用 户 界 面 类 中 重复 这 些 代 码 。 如 果 想 把 这 些 命 令 用 
于 快捷 键 的 话 ， 那 就 还 要 再 次 实现 这 种 入 栈 代码 。 更 好 的 办 法 是 用 一 个 实现 了 这 些 代 码 的 装饰 者 
来 包装 每 一 个 命令 。 这样 我 们 就 可 以 把 命令 对 象 传递 给 任意 的 用 户 界面 元 素 , 不 必 担 心 它 是 否 实 
现 了 入 栈 代 码 。 

下 面 这 个 装饰 者 的 作用 就 是 在 执行 一 个 命令 之 前 先 将 其 压 栈 : 


/* UndoDecorator class. */ 


var UndoDecorator = function(command, undoStack) { // implements ReversibleCommand 
this.command = command; 
this.undoStack = undoStack; 
}; 
UndoDecorator.prototype = { 
execute: function() { 
this.undoStack.push(this. command) ; 
this. command. execute(); 


ili function() { 
this.command.undo(); 
村 
这 是 装饰 者 模式 的 出 色 运用 。 籍 此 我 们 可 以 在 保留 原 有 接口 的 前 提 下 为 命令 增添 新 的 特性 。 
在 本 例 中 这 些 装 饰 者 对 象 可 以 与 所 有 命令 对 象 互 换 使 用 。 
现在 来 看 看 用 户 界面 类 。 这 些 类 负责 生成 必要 的 HTML 元 素 ， 并 且 为 其 注册 c1ick 事 件 监听 
器 ， 这 些 监听 器 要 么 调用 execute 方 法 要 么 调用 undo 方 法 : 


/* CommandButton class. */ 
var CommandButton = function(label, command, parent) { 


Interface.ensureImplements(command, ReversibleCommand) ; 
this.element = document.createElement( ‘button’ ); 
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this.element.innerHTML = label; 
parent .appendChild(this.element) ; 


addEvent(this.element, ‘click’, function() { 
command.execute(); 
}); 
j; 


/* UndoButton class. */ 


var UndoButton = function(label, parent, undoStack) { 
this.element = document.createElement('button'); 
this.element.innerHTML = label; i 
parent.appendChild(this.element); 
addEvent(this.element, 'click', function() { 
if(undoStack. length === 0) return; 
var lastCommand = undoStack.pop(); 
lastCommand.undo(); 


}); 

}; 

像 UndoDecorator 类 一 样 ，UndoButton 类 的 构造 函数 也 需要 把 命令 栈 作 为 参数 传 入 。 这 个 栈 其 
实 就 是 一 个 数组 。 调 用 经 UndoDecorator 对 象 装饰 过 的 命令 对 象 的 execute 方 法 时 这 个 命令 对 象 会 
被 压 入 栈 。 为 了 执行 取消 操作 ， 取 消 按钮 会 从 命令 栈 中 弹出 最 近 的 命令 并 调用 其 undo 方 法 。 这 将 
逆转 刚 执行 过 的 操作 。 

与 使 用 命令 模式 的 大 多 数 示例 一 样 ， 本 例 的 实现 代码 也 非常 简单 。 只 需要 实例 化 Cursor 和 所 
有 命令 ， 创 建 使 用 这 些 命令 的 按钮 ， 再 创建 一 个 空白 栈 即 可 : 


/* Implementation code. */ 


var body = document .getElementsByTagName( ‘body' )[0]; 
var cursor = new Cursor(400, 400, body); 
var undoStack = []; 


var upCommand = new UndoDecorator(new MoveUp(cursor), undoStack) ; 

var downCommand = new UndoDecorator(new MoveDown(cursor), undoStack); 
var leftCommand = new UndoDecorator(new MoveLeft(cursor), undoStack) ; 
var rightCommand = new UndoDecorator(new MoveRight(cursor), undoStack); 


var upButton = new CommandButton(‘Up', upCommand, body); 

var downButton = new CommandButton('Down', downCommand, body); 
var leftButton = new CommandButton('Left', leftCommand, body); 
var rightButton = new CommandButton('Right’, rightCommand, body); 
var undoButton = new UndoButton('Undo', body, undoStack); 


这 段 代 码 生 成 的 用 户 界面 包含 一 幅 画布 (canvas) “和 5 个 按钮 。 点 击 4 个 命令 按钮 中 的 任何 


@ canvas 是 HTML 5 草案 中 新 增 的 一 个 标签 ， 用 于 提供 一 些 绘图 功能 。 现 在 已 有 一 些 浏览 器 〈 不 含 IE) 支持 这 个 标 
签 。 一 一 译 者 注 
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一 个 都 会 向 相应 方向 移动 指针 。 而 点 击 取消 按钮 则 会 撤销 最 近 一 次 移动 。 
16.4.1 使 用 命令 日 志 实 现 不 可 着 操作 的 取消 


前 面 讨论 的 取消 操作 针对 的 都 是 移动 指针 这 类 容易 逆转 的 操作 。 对 于 那些 本 质 上 不 可 逆 的 操 
作 ， 要 想 实现 不 受 限制 的 取消 就 困难 得 多 。 例 如 ， 要 是 希望 修改 一 下 前 面 的 示例 ， 使 它 更 像 Etch 
A Sketch 游戏 ， 那 就 需要 在 指针 后 面 留 下 一 串 尾 迹 。 在 画布 上 画 线 很 容易 ， 不 过 要 取消 这 条 线 的 
绘制 是 不 可 能 的 。 从 一 个 点 到 另 一 个 点 的 移动 这 种 操作 具有 精确 的 对 立 操作 ， 执行 后 者 的 结果 看 
起 来 就 像 前 者 被 逆转 了 一 样 。 但 是 对 于 从 A 到 B 画 一 条 线 这 种 操作 ， 从 B 到 A 再 画 一 条 线 是 无 法 逆 
转 前 一 操作 的 ， 这 只 不 过 是 在 第 一 条 线 的 上 方 又 画 了 一 条 线 而 已 。 

取消 这 种 操作 的 唯一 办 法 是 清除 状态 ， 然 后 把 之 前 执行 过 的 操作 (不 含 最 近 那 个 ) 依次 重 做 
一 过 。 这 很 容易 办 到 ， 为 此 需要 把 所 有 执行 过 的 命令 记录 在 栈 中 。 要 想 取消 一 个 操作 ， 需 要 做 的 
就 是 从 栈 中 弹出 最 近 那 个 命令 并 弃 之 不 用 , 然后 清理 画布 并 从 头 开始 重新 执行 记录 下 来 的 所 有 命 
令 。 使 用 命令 日 志 实现 取消 操作 的 系统 不 要 求 那些 命令 都 是 可 逆 命 令 。 因此 在 本 例 中 可 以 继续 使 
用 原来 的 Command 接 口 。 

本 例 在 原先 的 例子 基础 上 所 做 的 修改 很 小 。 由 于 大 多 数 代码 都 保持 原封 不 动 ， 所 以 我 们 只 讨 
论 那 些 需 要 修改 的 地 方 。 第 一 个 变化 是 我 们 删除 了 所 有 命令 对 象 的 undo 方 法 ， 原因 是 命令 对 象 代 
表 的 操作 现在 不 再 可 逆 。 下面 是 其 中 的 一 个 命令 类 ， 其 undo 方 法 已 被 删除 : 


/* Movement commands. */ 


var MoveUp = function(cursor) { // implements Command 
this.cursor = cursor; 
}; 
MoveUp.prototype = { 
execute: function() { 
cursor.move(0, -10); 


J; 

接 下 来 , 最 大 的 变化 发 生 在 Cursor 类 的 代码 中 。 原来 用 来 记录 命令 的 栈 undoStack 现 在 成 了 该 
类 的 内 部 属性 , 其 名 称 也 改 成 了 commandSstack。 而 UndoDecorator 类 和 所 有 其 他 对 undoStack 的 引用 
都 被 删除 。 新 的 Cursor 类 如 下 所 示 ;: 


/* Cursor class, with an internal command stack, */ 


var Cursor = function(width, height, parent) { 
this.width = width; 
this.height = height; 
this.commandStack = []; 


this.canvas = document. createElement('canvas' ); 
this.canvas.width = this.width; 
this.canvas.height = this.height; 
parent.appendChild(this.canvas); 
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this.ctx = this.canvas.getContext('2d'); 
this.ctx.strokeStyle = '#cc0000'; 
this.move(0, 0); 
}; 
Cursor.prototype = { 
move: function(x, y) { 
var that = this; 
this.commandStack.push(function() { that.lineTo(x, y); }); 
this.executeCommands(); 


lineTo: function(x, y) { 
this.position.x += x; 
this.position.y += y; 
this.ctx. lineTo(this.position.x, this.position.y); 
}, 
executeCommands: function() { 
this.position = { x: this.width / 2, y: this.height / 2 }; 
this.ctx.clearRect(0, 0, this.width, this.height); // Clear the canvas. 
this.ctx.beginPath(); 
this.ctx.moveTo(this.position.x, this.position.y); 
for(var i = 0, len = this.commandStack.length; i < len; i++) { 
this.commandStack[i](); 


this.ctx.stroke(); 

Js 

undo: function() { 
this.commandStack.pop(); 
this.executeCommands(); 


} 

}; 

这 里 新 增 了 3 个 新 方法 。 原 有 的 move 方 法 已 被 修改 ， 它 现在 所 做 的 就 是 把 操作 压 入 命令 栈 ， 
然后 调用 executeCommands 方 法 。 实 际 执行 操作 并 画 线 的 是 1ineTo 方 法 。 executeCommands fit if Ht i 
canvas 元 素 ， 然 后 依次 执行 命令 栈 中 保存 的 操作 。undo 方 法 则 会 删除 栈 中 最 近 的 那 条 命令 ， 然 后 
调用 executeCommands 以 重建 系统 的 状态 。 

在 Cursor 类 中 似乎 有 些 命名 不 当 问 题 。 那 个 commandStack 包 含 的 实际 上 并 非 命令 对 象 ， 而 是 
对 函数 的 引用 。 而 executeCommands 方 法 实际 上 也 并 没有 调用 任何 命令 对 象 的 execute 方 法 ， 它 调 
用 的 只 不 过 是 栈 中 保存 的 函数 。 那 么 我 们 需要 回头 改 改 这 些 扎 眼 的 属性 和 方法 名 称 吗 ? 其 实 不 
必 。 命 令 也 有 许多 不 同类 型 ， 这 里 所 用 的 命令 没有 封装 在 对 象 中 并 不 意味 着 它们 不 能 算命 令 。 用 
闭 包 封 装 的 方法 调用 也 是 完全 有 效 的 命令 。 真 正 重要 的 是 它们 的 接口 要 一 致 ， 这 样 execute- 
Commands 方 法 不 必 知 道 它们 做 什么 用 也 能 调用 它们 。 因 为 这 里 所 用 的 命令 只 是 二 些 函数 引用 ， 所 
以 executeCommands 只 需要 在 其 后 面 加 上 “()” 就 能 调用 它们 。 这 再 一 致 不 过 了 。 

其 他 的 都 是 一 些 鸡毛 薪 皮 的 修改 。 所 有 对 undoStack 的 引用 都 被 删除 ， UndoButton 中 相关 元 素 
的 click 事 件 监听 器 的 代码 也 改 了 : 


/* UndoButton class. */ 
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var UndoButton = function(label, parent, cursor) { 
this.element = document.createElement('button'); 
this.element.innerHTML = label; 
parent. appendChild(this.element) ; 


addEvent(this.element, ‘click’, function() { 

cursor.undo(); 

H); 
}; 
实现 代码 与 原来 基本 相同 ,唯一 的 变化 是 删除 了 undoStack， 而 传 给 UndoButton 构 造 函数 的 参 

数 也 改 成 了 一 个 Cursor 实 例 : 

/* Implementation code. */ 


var body = document.getElementsByTagName( "body )[0]; 
var Cursor = new Cursor(400, 400, body); 


var upCommand = new MoveUp(cursor) ; 

var downCommand = new MoveDown(cursor); 
var leftCommand = new MoveLeft(cursor); 
var rightCommand = new MoveRight(cursor); 


var upButton = new CommandButton('Up', upCommand, body); 

var downButton = new CommandButton('Down', downCommand, body); 
var leftButton = new CommandButton('Left', leftCommand, body); 
var rightButton = new CommandButton('Right', rightCommand, body); 
var undoButton = new UndoButton('Undo', body, cursor); 


现在 我 们 有 了 一 个 带 有 不 受 限 的 取消 功能 的 在 线 Etch A Sketch。 因 为 按钮 发 出 的 命令 都 是 模 
块 化 的 ， 所 以 很 容易 增添 一 些 新 按钮 ， 比 如 画 圆 的 按钮 或 画 笑脸 符号 〈:-)) 的 按钮 。 由 于 现在 不 
再 要 求 操作 必须 可 逆 ， 因 此 我 们 可 以 实现 一 些 更 加 复杂 的 行为 。 


16.4.2 ”用 于 崩溃 恢复 的 命令 日 志 


命令 日 志 的 一 个 有 趣 用 途 是 在 程序 崩溃 后 恢复 其 状态 。 在 前 面 这 个 示例 中 , 可 以 用 XHR 把 经 
过 序列 化 处 理 的 命令 记录 到 服务 器 上 。 用 户 下 次 访问 该 网 页 的 时 候 ， 系统 可 以 找 出 这 些 命令 并 用 
其 将 画布 上 的 图 案 精确 恢复 到 浏览 器 关闭 时 的 状态 。 这 可 以 蔡 用 户 把 应 用 程序 状态 保管 下 来 ， 以 
便 其 撤销 先前 的 任何 一 次 浏览 器 会 话 中 执行 的 操作 。 如 果 应 用 系统 比较 复杂 ， 那 么 这 种 类 型 的 命 
令 日 志 会 有 很 大 的 存储 需求 。 为 此 你 可 以 提供 一 个 按钮 ， 用户 可 以 用 它 提交 (commit)》 到 当时 为 
止 的 所 有 操作 ， 从 而 清空 命令 栈 。 | 


16.5 ”命令 模式 的 适用 场合 


命令 模式 的 主要 用 途 是 把 调用 对 象 (用户 界 面 、API 和 代理 等 ) 与 实现 操作 的 对 象 隔离 开 。 照 此 
而 言 ， 凡 是 两 个 对 象 间 的 互动 方式 需要 有 更 高 的 模块 化 程度 时 都 可 以 用 到 这 种 模式 。 这 是 一 种 组 织 
型 模式 ， 几 乎 可 以 应 用 于 任何 系统 。 不 过 ， 最 能 体现 其 效用 的 还 是 那 种 需要 对 操作 进行 规范 化 处 理 
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的 场合 。 有 了 这 种 规范 化 处 理 ， 一 个 类 或 调用 者 也 能 调用 多 种 方法 ， 而 且 不 需要 先 为 此 了 解 那些 方 
法 。 许 多 用 户 界面 元 素 都 非常 符合 这 样 的 特征 ， 比 如 前 面 例子 中 的 那 种 菜单 。 命 令 模 式 可 以 彻底 消 
除 用 户 界面 元 素 与 负责 实际 工作 的 类 之 间 的 耦合 。 这 意味 着 这 些 元 素 可 以 被 重用 于 任何 网 页 或 项 目 
中 ， 因 为 它们 可 以 完全 独立 于 那些 类 而 使 用 。 而 那些 负责 实际 工作 的 类 也 能 被 不 同 的 用 户 界面 元 素 
使 用 。 你 可 以 为 某 个 操作 创建 一 个 命令 对 象 ， 然 后 用 菜单 项 、 工 具 图 标 和 键盘 快捷 键 调用 这 个 对 象 。 

可 以 受益 于 命令 模式 的 还 有 其 他 一 些 特别 场合 ,这 种 模式 可 以 用 来 封装 用 于 XHR 调 用 或 其 他 
延迟 性 调用 场合 的 回调 函数 。 用 一 个 回调 函数 命令 代替 回调 函数 ,可 以 把 多 条 函数 调用 封装 为 一 
个 单位 。 有 了 命令 对 象 的 帮助 ， 在 应 用 程序 中 实现 取消 机 制 几乎 是 一 件 不 足 挂 齿 的 事 。 实 现 不 受 
限制 的 取消 机 制 需 要 把 执行 过 的 命令 保存 在 栈 中 。 这 种 命令 日 志 甚至 可 以 用 来 取消 本 质 上 不 可 道 
的 操作 。 它 还 可 以 在 任何 应 用 程序 崩溃 之 后 用 来 恢复 其 整体 状态 。 


16.6 命令 模式 之 利 


使 用 命令 模式 的 主要 好 处 有 两 个 。 首 先 ， 如 果 运 用 得 当 ， 它 可 以 提高 程序 的 模块 化 程度 和 灵 
活性 。 第 二 ， 有 了 它 ， 实 现 取 消 和 状态 恢复 等 复杂 的 有 用 特性 非常 容易 。 

有 人 可 能 会 争辩 说 : 命令 不 过 就 是 一 个 不 必要 地 复杂 化 了 的 方法 , 在 大 多 数 情 况 下 一 个 赤 条 
条 的 方法 也 能 取代 它 。 这 种 观点 仅 对 命令 模式 的 那些 无 关 痛 痒 的 实现 (trivial implementations) 
成 立 。 命 令 对 象 具 有 的 特性 比 普通 的 方法 引用 多 得 多 。 它 可 以 被 参数 化 处 理 ， 而 且 将 那些 参数 保 
存 起 来 以 供 多 次 调用 。 你 可 以 为 它 定义 的 方法 不 只 有 execute， 还 可 以 是 undo 等 别 的 方法 ， 这 样 
一 来 同样 的 操作 就 可 以 用 不 同 的 方式 执行 。 还 可 以 为 其 定义 与 操作 相关 的 元 数据 ， 这 些 元 数据 可 
用 于 对 象 内 省 〈introspection) 或 事件 日 志 等 目的 。 命 令 对 象 是 经 过 封装 的 方法 调用 ， 它 因为 这 
种 封装 而 拥有 了 方法 调用 本 身 所 不 具备 的 许多 特性 。 


16.7 命令 模式 之 次 


与 其 他 任何 模式 一 样 ， 如 果 用 法 有 误 或 者 用 得 勉强 的 话 ， 命 令 模式 也 会 对 程序 造成 损害 。 如 
果 一 个 命令 对 象 只 包装 了 一 个 方法 调用 ， 而 且 其 唯一 目的 就 是 这 层 对 象 包装 的 话 ， 那 么 这 种 做 法 
是 一 种 浪费 。 如 果 你 不 需要 命令 模式 给 予 的 任何 额外 特性 ， 也 不 需要 具有 一 致 接口 的 类 所 带 来 的 
模块 性 , 那么 直接 使 用 方法 引用 而 不 是 完整 的 命令 对 象 也 许 更 恰当 。 命令 对 象 也 会 增加 代码 调试 
的 难度 ,这 是 因为 在 应 用 了 命令 模式 之 后 原 有 的 方法 之 上 又 多 了 一 层 可 能 出 错 的 代码 。 如 果 命令 
对 象 是 运行 期 间 动 态 创建 的 而 你 又 难以 确定 它 包含 着 什么 操作 的 话 , 情况 尤其 如 此 。 命令 对 象 都 
具有 同样 的 接口 并 且 可 以 随意 更 换 这 一 点 是 把 双 刃 剑 。 在 调试 复杂 的 应 用 程序 时 它们 很 难 跟踪 。 


16.8 小 结 
本 章 研究 了 命令 模式 。 这 是 一 种 用 来 封装 单个 操作 (discrete action) 的 结构 型 模式 ?。 其 封 


D 本 书 的 作者 在 这 方面 不 太 严谨 。 他 在 16.5 节 称 命令 模式 为 “组 织 型 模式 ” 但 在 这 里 又 称 其 为 “结构 型 模式 "。GoF 
的 《设计 模式 》 一 书 中 把 命令 模式 归 入 行为 模式 一 类 。 一 一 译 者 注 
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装 的 操作 可 能 是 单个 方法 调用 这 么 简单 ， 也 可 能 是 整个 子 程序 那么 复杂 。 经 封装 的 操作 可 以 作为 
一 等 的 对 象 进行 传送 。 命 令 对 象 主要 用 于 消除 调用 者 与 接收 者 之 间 的 耦合 ， 这 有 助 于 创建 高 度 模 
块 化 的 调用 者 , 它们 对 所 调用 的 操作 不 需要 任何 了 解 。 这 种 模式 也 给 了 程序 员 实现 接收 者 的 自由 ， 
他 们 不 必 担 心 接收 者 能 否 用 在 某 套用 户 界面 中 。 有 些 复杂 的 用 户 特性 用 命令 模式 很 容易 实现 ， 不 
受 限制 的 取消 和 程序 崩溃 之 后 的 状态 恢复 就 是 这 方面 的 两 个 例子 。 它 们 还 可 以 用 来 实现 事务 ， 具 
体 做 法 是 把 命令 保存 在 栈 中 ， 隔 一 段 时 间 提 交 一 次 。 

命令 模式 最 大 的 优点 在 于 ， 只 要 是 能 够 在 execute 方 法 中 实现 的 操作 ， 不 管 它 们 有 多 复杂 或 
者 彼此 的 差异 有 多 大 ， 都 能 以 与 任何 别 的 命令 完全 相同 的 方式 进行 传送 和 调用 。 借 助 这 种 模式 ， 

代码 的 重用 几乎 可 以 达到 一 种 不 受 限制 的 程度 ， 这 可 以 大 大 节省 程序 员 的 时 间 和 精力 。 
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职责 链 模式 


章 考 察 的 是 职责 链 模式 ， 它 可 以 用 来 消除 请 求 的 发 送 者 和 接收 者 之 间 的 耦合 。 这 是 通 
过 实现 一 个 由 隐 式 地 对 请 求 进行 处 理 的 对 象 组 成 的 链 而 做 到 的 。 链 中 的 每 个 对 象 可 以 


处 理 请 求 , 也 可 以 将 其 传 给 下 一 个 对 象 。JavaSeript 内 部 就 使 用 了 这 种 模式 来 处 理事 件 捕获 和 冒 泡 
的 问题 。 我 们 接 下 来 将 研究 如 何 用 这 种 模式 创建 耦合 更 松散 的 模块 和 优化 事件 绑 定 。 


17.1 职责 链 的 结构 


职责 链 由 多 个 不 同类 型 的 对 象 组 成 。 发 送 者 (sender) 是 发 出 请 求 的 对 象 , 而 接收 者 (receiver) 


则 是 链 中 那些 接收 这 种 请 求 并 且 对 其 进行 处 理 或 传递 的 对 象 。 请 求 本 身 有 时 也 是 一 个 对 象 ， 它 封 
装着 与 操作 有 关 的 所 有 数据 。 其 典型 的 运转 流程 大 致 是 : 


例 。 


口 发 送 者 知道 链 中 的 第 一 个 接收 者 。 它 向 这 个 接收 者 发 出 请 求 。 

口 每 一 个 接收 者 都 对 请 求 进行 分 析 ， 然 后 要 么 处 理 它 ， 要 么 将 其 往 下 传 。 

口 每 一 个 接收 者 知道 的 其 他 对 象 只 有 一 个 ， 即 它 在 链 中 的 下 家 (successor)。 

口 如 果 没 有 任何 接收 者 处 理 请 求 ， 那 么 请 求 将 从 链 上 离开 。 不 同 的 实现 对 此 有 不 同 的 反应 ， 
既 可 能 无 声 无 息 ， 也 可 能 抛 出 一 个 错误 。 

为 了 说 明 职责 链 模 式 的 组 织 方式 及 其 作用 ， 我 们 先 回顾 一 下 第 14 章 所 讲 的 那个 图 书馆 的 示 

例 中 的 PublicLibrary 类 保存 着 一 个 按 图 书 的 ISBN 索 引 的 图 书目 录 才 如 果 知 道 书 的 ISBN， 那 


么 查 书 很 容易 。 但 是 按 书 的 主题 或 类 别 查 书 却 很 困难 。 下 面 我 们 要 实现 卡 种 目录 对 和 象 ， 以 便 按 不 
同 标准 对 图 书 进行 分 类 。 


先 来 看 看 要 用 的 接口 : 


/* Interfaces. */ 


var Publication = new Interface('Publication', ['getIsbn’, ‘setIsbn', ‘getTitle’, 
‘setTitle', 'getAuthor', ‘setAuthor’, ‘getGenres', ‘setGenres', ‘display’]); 

var Library = new Interface('Library’, [‘addBook', 'findBooks', ‘checkoutBook’, 
‘returnBook' ]); 

var Catalog = new Interface('Catalog', ['handleFilingRequest’, 'findBooks’, 
‘setSuccessor' ]); 


与 以 前 相 比 ，Publication 接 口 只 是 多 了 两 个 新 方法 : getGenres#setGenres. Libraryt # 


增 了 一 个 为 图 书馆 增添 藏书 的 方法 ， 而 用 于 查 书 、 借 书 和 还 书 那 三 个 方法 是 原 有 的 。Catalog 接 
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口 是 新 增 的 。 它 将 用 来 创建 保存 图 书 对 象 的 类 。 本 例 中 将 对 图 书 分 类 编目 。Catalog 接 口 有 三 个 

方法 : handleFi1ingRequest 会 根据 传 给 它 的 图 书 是 否 符合 特定 标准 而 决定 是 否 将 其 编 入 内 部 目录 

中 ; findBooks 会 根据 某 些 参数 对 内 部 目录 进行 搜索 ，setSuccessor 则 会 设 定 职责 链 中 的 下 一 环 。 
现在 来 看 一 下 Book 和 Pub1icLibrary 这 两 个 将 被 重用 的 类 。 它们 都 需要 略 做 修改 ， 以 便 实 现 分 


类 编目 : 


/* Book class. */ 


var Book = function(isbn, title, author, genres) { // implements Publication 


ee 
Book 类 现在 多 了 一 个 用 来 说 明 图 书 所 属 类 别 的 参数 。 它 也 实现 了 getGenres 和 setGenres 方 法 ， 


不 过 这 里 省 略 了 其 具体 实现 ， 因 为 它们 就 是 一 对 简单 的 取 值 器 和 赋值 器 方法 。 


/* PublicLibrary class. */ 


var PublicLibrary = function(books) { // implements Library 
this.catalog = {}; 
for(var i = 0, len = books.length; i < len; i++) { 
this.addBook(books[i]); 
} 
}; 
PublicLibrary.prototype = { 
findBooks: function(searchString) { 
var results = []; 
for(var isbn in this.catalog) { 
if(!this.catalog.hasOwnProperty(isbn)) continue; 
if(this.catalog[isbn].getTitle().match(searchString) || 
this.catalog[ isbn].getAuthor().match(searchString)) { 
results.push(this.catalog[isbn]); 


} 
} 
return results; 
}, 
checkoutBook: function(book) { 
var isbn = book.getIsbn(); 
if(this.catalog[isbn]) { 
if(this.catalog[isbn].available) { 
this.catalog[isbn].available = false; 
return this.catalog[isbn]; 
} 


else { 
throw new Error('Publiclibrary: book ”+ book.getTitle() + 


' is not currently available.'); 


} 


else { 
throw new Error('PublicLibrary: book ' + book.getTitle() + ' not found.'); 
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} 
}， 


returnBook: function(book) { 
var isbn = book.getIsbn(); 
if(this.catalog[isbn]) { 
this.catalog[isbn].available = true; 
} 
else { 
throw new Error('PublicLibrary: book ' + book.getTitle() + 
} 
}, 
addBook: function(newBook) { 
this.catalog[newBook.getIsbn()] = { book: newBook, available: true }; 
} 
}; 


not found.'); 


除了 用 于 添加 图 书 的 代码 被 移 到 了 addBook 这 个 新 方法 中 以 外 ，PublicLibrary 目 前 还 没有 其 


他 改变 。 本 例 中 稍 后 还 会 对 addBook 和 findBooks 方 法 进行 修改 。 


安顿 好 原 有 类 之 后 , 现在 该 来 实现 目录 对 象 了 。 在 为 这 些 对 象 编写 代码 之 前 ， 先 来 设想 一 下 
其 用 法 。 所 有 用 于 判断 一 本 书 是 否 应 该 编 入 某 个 特定 目录 的 代码 都 封装 在 Catalog 类 中 。 这 意味 


着 需要 在 Pub1icLibrary 对 象 中 把 每 一 本 书 都 提供 给 每 一 种 分 类 目录 进行 处 理 : 


/* PublicLibrary class, with hard-coded catalogs for genre. */ 


var PublicLibrary = function(books) { // implements Library 
this.catalog = {}; 
this.biographyCatalog = new BiographyCatalog(); 
this. fantasyCatalog = new FantasyCatalog(); 
this.mysteryCatalog = new MysteryCatalog(); 
this.nonFictionCatalog = new NonFictionCatalog(); 
this.sciFiCatalog = new SciFiCatalog(); 


for(var i = 0, len = books.length; i < len; i++) { 
this.addBook(books[i]); 
} 
}; 
PublicLibrary.prototype = { 
findBooks: function(searchString) { ... }, 
checkoutBook: function(book) { ... }, 
returnBook: function(book) { ... }, 
addBook: function(newBook) { 
// Always add the book to the main catalog. 
this.catalog[newBook.getIsbn()] = { book: newBook, available: true }; 


// Try to add the book to each genre catalog. 

this. biographyCatalog.handleF ilingRequest (newBook) ; 
this. fantasyCatalog.handleFilingRequest (newBook ) ; 
this.mysteryCatalog.handleFilingRequest (newBook) ; 
this.nonFictionCatalog.handleFilingRequest(newBook) ; 
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this.sciFiCatalog.handleFilingRequest (newBook); 
} 
j; 


前 面 这 段 代码 可 以 奏效 ， 不 过 其 中 固化 了 对 5 个 不 同类 的 依赖 。 如 果 想 增加 更 多 图 书 类 别 ， 
那 就 需要 修改 构造 函数 和 addBook 方 法 这 两 处 的 代码 。 此 外 ， 把 这 些 目 录 类 别 固化 在 构造 函数 中 
也 没有 多 大 意义 ， 因 为 PublicLibrary 的 不 同 实例 可 能 希望 拥有 完全 不 同 的 一 套 分 类 目录 。 而 你 


也 不 可 能 在 对 象 实例 化 之 后 再 修改 其 支持 的 类 别 。 这 些 理由 都 充分 说 明了 前 面 的 方法 并 不 可 取 。 
下 面 来 看 职责 链 模式 能 为 它 带 来 什么 改进 : 


/* PublicLibrary class, with genre catalogs in a chain of responsibility. */ 


var PublicLibrary = function(books, firstGenreCatalog) { // implements Library 
this.catalog = {}; 


this. firstGenreCatalog = firstGenreCatalog; 


for(var i = 0, len = books.length; i < len; i++) { 
this. addBook(books[i]); 


j; 
PublicLibrary.prototype = { 
findBooks: function(searchString) { ... }, 
checkoutBook: function(book) { ... }, 
returnBook: function(book) { ... } 
addBook: function(newBook) { 
// Always add the book to the main catalog. 
this.catalog[newBook.getIsbn()] = { book: newBook, available: true }; 
// Try to add the book to each genre catalog. 
this. firstGenreCatalog.handleFilingRequest (newBook) ; 


} 

}; 

这 个 改进 很 明显 。 现在 需要 保存 的 只 是 指向 分 类 目录 链 中 第 一 个 环节 的 引用 。 如 果 想 把 一 本 
新 书 编 入 各 种 分 类 目录 中 ， 只 需要 将 其 传 给 链 中 第 一 个 目录 对 象 即 可 。 第 一 个 目录 要 么 把 它 编 入 
自己 的 目录 (如 果 它 符合 所 需 标准 )， 要 么 不 编 ， 然 后 ， 该 目录 会 将 该 请 求 传递 给 下 一 个 目录 。 
因为 一 本 图 书 可 以 属于 不 止 一 个 类 别 ， 所 以 每 个 目录 都 会 把 请 求 往 下 传递 。 

现在 不 再 有 固化 在 代码 中 的 依赖 所 有 分 类 目录 都 在 外 部 实例 化 ， 因此 不 同 的 PublicLibrary 
实例 能 够 使 用 不 同 的 分 类 。 你 随时 都 可 以 在 链 中 加 入 新 的 目录 。 下 面 的 例子 显示 了 其 用 法 : 


// Instantiate the catalogs. 
var biographyCatalog = new BiographyCatalog(); 
var fantasyCatalog = new FantasyCatalog(); 
var mysteryCatalog = new MysteryCatalog(); 
var, nonFictionCatalog = new NonFictionCatalog(); 
var sciFiCatalog = new SciFiCatalog(); 


3 


// Set the links in the chain. 
biographyCatalog.setSuccessor(fantasyCatalog); 
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fantasyCatalog.setSuccessor(mysteryCatalog) ; 
mysteryCatalog. setSuccessor(nonFictionCatalog) ; 
nonFictionCatalog.setSuccessor(sciFiCatalog); 


// Give the first link in the chain as an argument to the constructor. 
var myLibrary = new PublicLibrary(books, biographyCatalog); 


// You can add links to the chain whenever you like. 
var historyCatalog = new HistoryCatalog(); 
sciFiCatalog.setSuccessor(historyCatalog) ; 


这 个 例子 中 ， 原 来 的 链 上 有 5 个 环节 ， 第 6 个 环节 是 后 来 加 的 。 这 意味 着 图 书馆 中 每 增加 一 本 
书 都 会 通过 调用 链 上 第 一 个 环节 的 handleFi1ingRequest 方 法 发 起 对 该 书 的 编目 请 求 。 该 请 求 将 沿 
目录 链 逐 一 经 过 6 个 目录 ， 最 后 从 链 尾 离开 。 链 上 新 增 的 任何 目录 都 会 被 挂 到 链 尾 。 

前 面 我 们 已 经 考察 了 使 用 职责 链 模 式 的 动机 以 及 与 其 使 用 相关 的 一 般 结构 , 但 还 没有 研究 过 
链 上 的 对 象 本 身 。 这 些 对 象 都 具有 一 些 共 同 特征 。 它 们 都 拥有 一 个 指向 链 上 下 一 个 对 象 ( 被 称 为 
下 家 (successor)) 的 引用 。 对 于 链 上 最 后 一 个 对 象 ， 这 是 一 个 空 引用 。 链 上 的 对 象 至 少 都 要 实 
现 一 个 共同 的 方法 ， 即 负责 处 理 请 求 的 方法 。 这 些 对 象 不 用 像 前 面 的 例子 中 那样 属于 同一 个 类 ， 
但 是 它们 必须 实现 同样 的 接口 。 通常 它们 分 别 属于 一 个 类 ( 它 实现 了 所 有 方法 的 默认 版 本 ) 的 各 
种 子 类 。 分 类 目录 对 象 就 是 这 样 实现 的 : 


/* GenreCatalog class, used as a superclass for specific catalog classes. */ 


var GenreCatalog = function() { // implements Catalog 
this.successor = null; 
this.catalog = []; 
}; 
GenreCatalog.prototype = { 
_bookMatchesCriteria: function(book) { 
return false; // Default implementation; this method will be overriden in 
// the subclasses. 
}, 
handleFilingRequest: function(book) { 
// Check to see if the book belongs in this catagory. 
if(this._bookMatchesCriteria(book)) { 
this.catalog.push(book) ; 
} 
// Pass the request on to the next link. 
if(this.successor) { 
this. successor. handleFilingRequest (book) ; 
} 
b 
findBooks: function(request) { 
if(this.successor) { 
return this.successor.findBooks (request); 


}, 


setSuccessor: function(successor) { 
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if(Interface.ensureImplements(successor, Catalog) { 
this.successor = successor; 
; } 

}; 

这 个 超 类 提供 了 所 有 必需 方法 的 默认 实现 ， 它 们 可 以 被 各 种 子 类 继承 。 子 类 只 需要 重 写 
findBooks (参见 下 一 节 ) 和 _bookMatchesCriteria 这 两 个 方法 。 其 中 后 一 个 方法 是 一 个 伪 私 用 方 
法 ， 它 负责 判断 一 本 书 是 否 应 被 编 入 相关 分 类 目录 。GenreCatalog 类 提供 了 这 两 个 方法 的 最 简 实 
现 ， 以 防 子 类 没有 重 写 它 们 。 

从 这 个 超 类 派生 一 个 分 类 目录 子 类 很 简单 ; 


/* SciFiCatalog class. */ 


var SciFiCatalog = function() {}; // implements Catalog 
extend(SciFiCatalog, GenreCatalog); 
SciFiCatalog.prototype._bookMatchesCriteria = function(book) { 
var genres = book.getGenres(); 
if(book.getTitle().match(/space/i)) { 
return true; 
} 
for(var i = 0, len = genres.length; i < len; i++) { 
var genre = genres[i].toLowerCase(); 
if(genres === ‘sci-fi’ || genres === ‘scifi’ || genres === ‘science fiction’) { 
return true; 


return false; 

这 段 代 码 先 创建 了 一 个 空 构造 函数 ， 让 其 继承 GenreCatalog， 然 后 实现 了 _bookMatches- 
Criteria 方 法 。 它 的 这 个 方法 对 图 书 的 书 名 和 类 别 进行 检查 ， 判 断 是 否 二 者 中 有 一 个 能 够 匹 
配 某 些 搜索 用 词 (search term)。 这 只 是 一 个 非常 简单 的 实现 。 更 健壮 的 方案 需要 检查 更 多 搜 
索 用 词 。 


17.2 传递 请 求 


在 链 上 传递 请 求 有 许多 不 同方 法 可 供 选 择 。 最 常见 的 做 法 要 么 是 使 用 一 个 专门 的 请 求 对 象 ， 
要 么 是 根本 不 使 用 参数 ， 只 依靠 方法 自身 传递 消息 。 不 用 参数 调用 方法 是 最 简单 的 办 法 。 我 们 将 
在 17.6 节 的 实用 示例 中 考察 这 种 技术 。 在 前 面 的 例子 中 ， 我 们 使 用 了 另 一 种 常见 技术 ， 即 把 图 书 
对 象 作为 请 求 进行 传递 。 图 书 对 象 封装 了 在 判断 链 上 哪些 环节 应 该 将 其 编 入 它们 的 目录 时 需要 的 
所 有 数据 。 这 属于 将 现 有 对 象 作为 请 求 对 象 进行 重用 的 情况 。 而 在 本 节 中 ， 我们 将 实现 分 类 目录 
的 findBooks 方 法 ， 并 将 考察 如 何 使 用 专门 的 请 求 对 象 来 在 链 上 的 各 个 环节 之 间 传 递 数据 。 

首先 我 们 需要 修改 一 下 Pub1icLibrary 的 findBooks 方 法 ,以便 可 以 根据 类 别 来 缩小 搜索 范围 。 
如 果 调 用 该 方法 时 提供 了 可 选 的 genres 参 数 ， 那 么 搜索 将 只 在 属于 其 指定 类 别 的 图 书 中 进行 : 
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/* PublicLibrary class. */ 
var PublicLibrary = function(books) { // implements Library 


Eii 
PublicLibrary.prototype = { 
findBooks: function(searchString, genres) { 
// If the optional genres argument is given, search for books only in 
// those genres. Use the chain of responsibility to perform the search. 
if(typeof genres === 'object' && genres.length > 0) { 
var requestObject = { 
searchString: searchString, 
genres: genres, 
results: [] 
}; 
var responseObject = this.firstGenreCatalog.findBooks(requestObject) ; 
return responseObject.results; 
} 
// Otherwise, search through all books. 
else { 
var results = []; 
for(var isbn in this.catalog) { 
if(!this.catalog.hasOwnProperty(isbn)) continue; 
if(this.catalog[isbn].getTitle().match(searchString) || 
this.catalog[isbn].getAuthor().match(searchString)) { 
results.push(this.catalog[isbn]); 
} 
} 
return results; 
} 
a function(book) { ... }, 
returnBook: function(book) { ... }, 
addBook: function(newBook) { ... } 
j; 
findBooks 方 法 创建 了 一 个 用 来 封装 与 请 求 相 关 的 所 有 信息 的 对 象 ， 这 些 信息 包括 将 要 搜索 
的 一 组 类 别 、 搜 索 用 词 和 一 个 用 来 保存 查找 结果 的 空 数组 。 这 里 有 一 个 明显 的 问题 这 些 信息 作 
为 独立 的 参数 进行 传递 也 很 容易 , 那 为 什么 还 要 费心 创建 这 样 一 个 对 象 呢 ? 创建 这 个 对 象 的 主要 
原因 是 ， 把 所 有 数据 集中 在 一 起 后 管理 起 来 要 方便 得 多 。 这 些 信 息 需要 在 通过 链 上 各 个 环节 的 过 
程 中 保持 完好 无 缺 ， 把 它们 封装 在 一 个 对 象 中 更 利于 做 到 这 一 点 。 在 本 例 中 ， 这 个 对 象 也 会 作为 
返回 值 返回 给 客户 代码 。 如 果 要 一 次 在 链 上 发 起 多 个 搜索 ,那么 这 样 的 设计 也 有 助 于 把 搜索 结果 
与 所 搜索 的 用 词 和 类 别 保存 在 一 起 。 
现在 我 们 要 实现 GenreCatalog 这 个 超 类 中 的 findBooks 方 法 。 这 个 方法 将 被 用 在 所 有 子 类 中 ， 
它 不 需要 被 重 写 。 其 代码 有 点 复杂 ， 我 们 会 逐步 进行 详细 说 明 : 


/* GenreCatalog class, used as a superclass for specific catalog classes. */ 
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var GenreCatalog = function() { // implements Catalog 
this.successor = null; 
this.catalog = []; 
this.genreNames = []; 
}; 
GenreCatalog.prototype = { 
_bookMatchesCriteria: function(book) { ... }, 
handleFilingRequest: function(book) { ... }, 
findBooks: function(request) { 
var found = false; 
for(var i = 0, len = request.genres.length; i < len &&!found ; i++) { 
for(var j = 0, nameLen = this.genreNames. length; j < nameLen; j++) { 
if(this.genreNames[j] === request.genres[i]) { 
found = true; // This link in the chain should handle 
// the request. 
break; 
} 
} 
} 


if(found) { // Search through this catalog for books that match the search 
// string and aren't already in the results. 
outerloop: for(var i = 0, len = this.catalog. length; i < len; i++) { 

var book = this.catalog[i]; 

if(book.getTitle().match( request. searchString) || 
book. getAuthor().match( request. searchString) ) { 

for(var j = 0, requestLen = request.results.length; j < requestLen; j++) { 
if(request.results[j].getIsbn() === book.getIsbn()) { 
continue outerloop; // The book is already in the results; skip it. 

} 


} 
request.results.push(book); // The book matches and doesn't already 


// appear in the results. Add it. 
} 
} 
} 


// Continue to pass the request down the chain if the successor is set. 
if(this.successor) { 
return this.successor.findBooks (request); 
} 
// Otherwise, we have reached the end of the chain. Return the request 
// object back up the chain. 
else { 
return request; 
} 
}, 
setSuccessor: function(successor) { ... } 


}; 
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这 个 方法 可 以 分 为 三 大 部 分 。 第 一 部 分 逐一 检查 请 求 对 象 中 的 每 一 个 类 别名 称 , 看 看 其 是 否 
与 对 象 中 保存 的 一 组 类 别名 称 中 的 某 一 个 匹配 。 如 果 匹 配 ， 那么 代码 的 第 二 部 分 会 逐一 检查 目录 
中 的 所 有 图 书 ， 看 看 其 书 名 和 作者 姓名 是 否 与 搜索 用 词 匹配 。 与 搜索 用 词 匹配 的 图 书 将 被 添加 到 
请 求 对 象 中 的 results 数 组 中 ， 不 过 其 前 提 是 该 数组 中 还 没有 这 本 书 。 在 最 后 一 部 分 ， 如 果 当 前 
目录 对 象 不 是 链 上 的 最 后 一 环 ， 那 么 请 求 将 被 沿 目录 链 继续 下 传 ， 否 则 它 将 返回 请 求 对 象 。 最 终 
请 求 对 象 将 从 链 尾 开始 沿 目录 链 逐 环 向 上 返回 ， 直 到 返回 给 客户 代码 。 

在 超 类 GenreCatalog 中 ， 用 于 保存 类 别名 称 的 属性 genreNames 是 一 个 空 数组 ， 在 子 类 中 必须 
为 其 填 入 一 些 具体 的 类 别名 称 。 下 面 是 SciFiCatalog 类 的 实现 代码 : 


/* SciFiCatalog class. */ 


var SciFiCatalog = function() { // implements Catalog 
this.genreNames = ['sci-fi', ‘scifi’, ‘science fiction’ ]; 


extend(SciFiCatalog, GenreCatalog); 
SciFiCatalog.prototype. _bookMatchesCriteria = function(book) { ... }; 


通过 把 请 求 封装 为 一 个 对 象 ， 可 以 使 它 更 容易 管理 。 在 GenreCatalog 类 的 findBooks 方 法 这 种 
复杂 代码 中 尤其 如 此 。 它 有 助 于 让 搜索 用 词 、 类 别 和 搜索 结果 在 通过 链 上 所 有 必须 经 过 的 环节 的 
过 程 中 保持 完好 无 缺 。 


17.3 ”在 现 有 层次 体系 中 实现 职责 链 


前 面 例子 中 的 职责 链 是 从 头 开始 创建 出 来 的 , 但 是 在 一 个 现 有 的 对 象 层 次 体系 中 实现 这 种 模 
式 往往 更 容易 。 在 此 情况 下 它 经 常 与 组 合 模式 搭配 使 用 。 由 于 组 合 模式 已 经 建立 了 一 个 对 象 层次 
体系 ， 因 此 在 此 基础 上 添加 一 些 用 来 处 理 (或 传递 ) 请 求 的 方法 很 简单 。 

不 过 要 注意 , 在 这 种 结合 中 方法 的 工作 机 制 相对 于 组 合 模式 中 的 一 般 机 制 有 所 偏离 。 在 组 合 
RAT, 组 合 对 象 与 叶 对 象 实 现 了 同样 的 接口 。 对 组 合 对 象 进行 的 任何 方法 调用 都 会 被 传递 到 所 
有 子 对 象 一 一 包括 叶 对 象 和 那些 本 身 也 是 组 合 对 象 的 子 对 象 . 方法 调用 到 达 叶 对 象 之 后 ， 这 些 对 
象 就 会 实际 执行 操作 并 完成 工作 。 

但 在 组 合 模式 结合 了 职责 链 模式 之 后 ， 方 法 调用 就 不 再 总 是 不 加 分 辨 地 往 下 一 直 传 到 时 对 
象 。 此 时 每 一 层 都 要 对 请 求 进行 分 析 ， 以 判断 当前 对 象 应 该 处 理 它 还 是 应 该 把 它 往 下 传 。 组 合 对 
象 实际 上 也 会 承担 部 分 工作 ， 而 不 是 单纯 依靠 叶 对 象 执行 所 有 操作 。 

这 两 种 模式 的 结合 看 似 让 代码 增加 了 一 些 复杂 性 ， 其 实 通过 重用 现 有 的 层次 体系 来 实现 职责 
链 有 很 多 好 处 。 这 样 一 来 , 就 不 用 单独 实现 一 些 对 象 来 作 链 上 的 环节 ， 也 不 用 手工 设 定 下 家 对 象 。 
这 些 事 早已 安排 妥当 。 此 外 ， 通过 规定 在 某 些 场合 下 一 些 方法 调用 可 以 在 层次 体系 中 较 高 的 层次 
上 得 到 处 理 ， 并 且 阻 止 较 低层 次 的 节点 和 叶 节点 获悉 这 些 调用 ， 可 以 让 组 合 模式 变 得 更 加 健壮 。 

对 于 较 深 的 层次 体系 这 种 作用 尤其 明显 。 假 设 有 个 组 合 对 象 层次 体系 有 5 个 层次 ， 其 中 每 个 
组 合 对 象 都 有 5 个 子 对 象 。 那 么 叶 对 象 总 共有 625 个 ， 而 所 有 对 象 加 起 来 一 共 是 781 个 。 通常 情况 
下 ， 所 有 方法 调用 都 要 传递 到 每 一 个 对 象 ， 这 意味 着 该 操作 将 经 过 156 个 组 合 对 象 ， 最 终 由 625 
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个 叶 节 点 执行 。 要 是 该 方法 能 在 第 二 层 进行 处 理 ， 那 么 它 只 需要 经 过 一 个 对 象 ， 然 后 由 5 个 对 象 
执行 。 这 样 带 来 的 节省 多 达 两 个 数量 级 。 

职责 链 模式 和 组 合 模式 的 结合 对 双方 都 是 一 种 优化 。 由 于 职责 链 是 现成 的 ， 所 以 设置 代码 的 
数量 和 用 于 职责 链 的 额外 对 象 的 数目 都 减少 了 。 由 于 在 组 合 层次 体系 中 某 个 方法 可 能 会 在 高 层 得 
到 处 理 ， 所 以 在 整个 树 上 执行 该 方法 所 需 的 计算 量 也 降低 了 。 本章 后 面 的 实用 示例 就 结合 使 用 了 
这 两 种 模式 ， 其 目的 在 于 让 HTML 元 素 层次 体系 上 的 方法 调用 更 有 效率 。 


17.4 事件 委托 


JavaScript 语 言 使 用 了 职责 链 模式 来 决定 如 何 处 理事 件 。 事件 被 触发 时 (以 点 击 事件 为 例 ) 要 
经 历 两 个 阶段 。 第 一 个 阶段 是 事件 捕获 (event capturing) 阶段 。 在 此 期 间 ， 事 件 会 沿 HTML 层 次 
体系 向 下 传播 ， 从 最 顶层 开始 ， 历 经 各 个 子 元 素 ， 直 到 到 达 被 点 击 的 元 素 。 从 这 时 起 将 开始 第 二 
个 阶段 ， 即 事件 冒 泡 Cevent bubbling)。 在 这 个 阶段 事件 会 历经 同一 批 元 素 升 回 到 顶层 祖先 。 绑 
定 在 事件 经 过 的 这 些 元 素 上 的 事件 监听 器 既 可 以 停止 事件 传播 , 也 可 以 让 其 继续 沿 层次 体系 向 上 
或 向 下 传播 。 这 里 传递 的 请 求 对 象 称 为 事件 对 象 (event object)， 它 包含 着 与 事件 有 关 的 所 有 信 
息 ， 比 如 事件 名 称 和 最 初 激 发 事件 的 元 素 。 

因为 事件 模型 本 质 上 是 作为 一 个 职责 链 实现 的 , 所 以 你 在 前 面 学 到 的 有 关 这 个 模式 的 一 些 经 
验 也 可 以 应 用 于 事件 处 理 方 面 。 其 中 一 条 就 是 ， 最 好 在 层次 体系 的 较 高 层次 上 处 理 请 求 。 假 设 有 
一 个 无 序列 表 包含 着 几 打 列 表 项 。 与 其 为 其 中 的 每 一 个 1i 元 素 绑 定 一 个 click 事 件 监听 器 ， 不 如 
只 为 由 元 素 绑 定 一 个 这 种 事件 监听 器 。 尽 管 两 种 做 法 都 能 实现 同样 的 目标 ， 而 且 访 问 到 的 都 是 完 
全 相同 的 事件 对 象 ， 但 是 如 果 采 用 只 为 山 元 素 绑 定 一 个 事件 监听 器 这 种 做 法 的 话 ， 脚 本 会 运行 得 
更 快 ,内 存 消耗 得 更 少 , 而 且 以 后 维护 起 来 也 更 容易 。 这 种 技术 称 为 事件 委托 (event delegation), 
这 是 职责 链 方面 的 知识 有 助 于 优化 代码 的 情况 之 一 。 


17.5 ”职责 链 模式 的 适用 场合 


适用 职责 链 模式 的 场合 有 几 种 。 在 图 书馆 的 例子 中 ， 我 们 想 发 出 对 某 本 图 书 进行 分 类 的 请 
求 。 我 们 事先 不 知道 如 果 可 以 的 话 它 应 该 被 分 类 到 哪 一 个 目录 ， 也 不 知道 可 用 目录 的 数目 和 类 
型 。 为 了 解决 这 些 问题 ， 我 们 使 用 了 一 个 目录 链 ， 其 中 的 每 一 个 目录 都 会 把 图 书 对 象 沿 链 传递 
给 其 下 家 。 

这 个 例子 说 明了 可 以 受益 于 职责 链 模式 的 场合 。 如果 事 先 不 知道 在 几 个 对 象 中 有 哪些 能 够 处 
理 请 求 ， 那 么 这 就 属于 应 该 使 用 职责 链 的 情况 。 如 果 这 批 处 理 器 对 象 在 开发 期 间 不 可 知 ， 而 是 需 
要 动态 指定 的 话 ， 那么 也 应 该 使 用 这 种 模式 。 该 模式 还 可 以 用 在 对 于 每 个 请 求 都 不 止 有 一 个 对 象 
可 以 对 它 进行 处 理 这 种 情况 下 。 例 如 ， 在 图 书馆 的 例子 中 ,每 本 图 书 都 可 以 被 分 类 到 不 止 一 个 目 
Ko 该 请 求 可 以 先 被 一 个 对 象 处 理 , 然后 继续 往 下 传 , 在 链 上 可 能 后 面 还 有 另 一 个 对 象 会 处 理 它 。 

使 用 这 种 模式 , 可 以 把 特定 的 具体 类 与 客户 隔离 开 , 并 代 之 以 一 条 由 弱 耦 合 的 对 象 组 成 的 链 ， 
它 将 隐 式 地 对 请 求 进行 处 理 。 这 有 助 于 提高 代码 的 模块 化 程度 和 可 维护 性 。 
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17.6 图 片 库 的 进一步 讨论 


我 们 在 第 9 章 中 曾 通 过 设计 一 个 层次 化 的 图 片 库 来 说 明 组 合 模式 的 用 法 。 在 此 我 们 将 继续 讨 
论 这 个 例子 ， 看 看 职责 链 模式 如 何 进一步 提高 其 效率 并 为 其 增加 各 种 特性 。 首 先 ， 我 们 将 使 用 组 
合 对 象 层次 体系 来 重新 实现 hide 和 show 方 法 ， 在 此 过 程 中 会 结合 使 用 职责 链 。 接 下 来 ， 我 们 将 显 
示 如 何 把 图 片 动态 加 入 该 层次 体系 中 的 任意 层次 ， 其 具体 做 法 是 从 顶层 开始 将 请 求 逐 级 下 传 。 

这 个 图 片 库 仅 由 两 个 类 组 成 : DynamicGallery 是 组 合 对 象 类 ， 而 6alleryImage 是 叶 类 。 下 面 
是 这 些 类 原来 在 第 9 章 中 的 实现 : 


/* Interfaces. */ 


var Composite = new Interface('Composite', ['add', ‘remove’, ‘getChild’ ]); 
var GalleryItem = new Interface('GalleryItem', ['hide’, ‘show']); 


/* DynamicGallery class. */ 


var DynamicGallery = function(id) { // implements Composite, GalleryItem 
this.children = []; 
this.element = document.createElement('div'); 
this.element.id = id; 
this.element.className = ‘dynamic-gallery'; 
} 
DynamicGallery.prototype = { 
add: function(child) { 
Interface.ensureImplements(child, Composite, GalleryItem) ; 
this.children.push(child); 
this.element.appendChild(child.getElement()); 
}, 
remove: function(child) { 
for(var node, i = 0; node = this.getChild(i); i++) { 
if(node == child) { 
this. children.splice(i, 1); 
break; 
} | 7 y 
} 
this.element.removeChild(child.getElement()); 
b 
getChild: function(i) { 
return this.children[i]; 
hide: function() { 
for(var node, i = 0; node = this.getChild(i); i++) { 
node.hide(); 


this.element.style.display = 'none'; 


}, 
show: function() { 
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this.element.style.display = ''; 
for(var node, i = 0; node = this.getChild(i); i++) { 
node. show(); 
} 
}, 


getElement: function() { 
return this.element; 
} 
}; 


/* GalleryImage class. */ 


var GalleryImage = function(src) { // implements Composite, GalleryItem 
this.element = document.createElement('img'); 
this.element.className = 'gallery-image'; 
this.element.src = src; 


} 

GalleryImage.prototype = { 
add: function() {}, // This is a leaf node, so we don't 
remove: function() {}, // implement these methods, we just 
getChild: function() {}, // define them. 


hide: function() { 
this.element.style.display = ‘none’; 


show: function() { 
this.element.style.display = ''; 
}, 


getElement: function() { 
return this.element; 
} 
}; 


17.6.1 用 职责 链 提高 组 合 对 象 的 效率 


在 组 合 对 象 中 ，hide 和 show 方 法 先 对 本 层次 的 一 个 样式 属性 进行 设置 ， 然 后 将 调用 传递 给 所 
257] 有 子 对 象 。 这 是 一 种 续 密 的 做 法 ， 但 是 效率 不 高 。 由 于 元 素 的 display 样 式 属性 会 被 其 所 有 子 元 
素 继 承 ， 因 此 没有 必要 把 方法 调用 向 层次 体系 的 下 层 继续 传递 。 更 好 的 做 法 是 将 这 些 方法 作为 沿 
职责 链 传 递 的 请 求实 现 。 
这 样 做 需要 知道 什么 时 候 应 该 停止 请 求 以 及 什么 时 候 应 该 将 它 传递 给 子 节点 。 这 正 是 职责 链 
模式 的 核心 : 懂得 什么 时 候 处 理 请 求 以 及 什么 时 候 传递 请 求 。 每 个 组 合 对 象 节点 和 叶 节点 都 有 两 
种 状态 :显示 和 隐藏 。hide 请 求 根本 不 必 传递 ， 因 为 用 CSS 隐 藏 组 合 节点 将 自动 隐藏 其 所 有 子 节 
点 。show 请 求 则 总 是 需要 传递 ， 因 为 无 法 预先 得 知 组 合 对 象 节点 的 所 有 子 节点 的 状态 。 我 们 做 的 
第 一 个 优化 是 从 hide 方 法 中 删除 将 方法 调用 传递 给 子 节点 的 那 部 分 代码 : 
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/* DynamicGallery class. */ 
var DynamicGallery = function(id) { // implements Composite, GalleryItem 


} 
DynamicGallery.prototype = { 
add: function(child) { ... }, 
remove: function(child) { ... }, 
getChild: function(i) { ... }, 
hide: function() { 
this.element.style.display = 'none'; 
}, 
show: function() { ... }, 
getElement: function() { ... } 
}; 
现在 该 组 合 对 象 层次 体系 中 的 任何 一 段 都 可 以 被 视 为 一 条 职责 链 。 在 传递 hide 或 show 请 求 的 
时 候 ， 你 并 不 知道 或 关心 具体 将 由 哪些 对 象 执行 那些 实际 实现 隐藏 或 显示 的 操作 ， 因 为 请 求 处 理 
是 隐 式 的 。 


176.2 为 图 片 添加 标签 


前 面 的 例子 是 一 个 用 来 显示 如 何 用 职责 链 优化 组 合 对 象 的 极其 简单 的 案例 。 我 们 将 通过 为 图 
片 添加 标签 进一步 阐明 这 个 概念 。 标 签 是 一 个 描述 性 的 标题 ， 可 以 用 来 对 图 片 进行 分 类 。 图 片 和 
图 片 库 都 可 以 添加 标签 。 为 图 片 库 添加 标签 实际 上 相当 于 让 其 中 的 所 有 图 片 都 使 用 这 个 标签 。 你 
可 以 在 层次 体系 的 任何 层次 上 搜索 具有 指定 标签 的 所 有 图 像 . 这 正 是 职责 链 的 优化 可 资 利用 的 地 
方 。 如果 在 搜索 过 程 中 遇 到 一 个 具有 所 请 求 的 标签 的 组 合 对 象 节点 ， 那 就 可 以 停止 请 求 并 将 该 节 
点 的 所 有 叶 级 后 代 节 点 作为 搜索 结果 返回 : 

var Composite = new Interface('Composite', ['add', ‘remove’, ‘getChild’, 

"getAllLeaves']); 


var GalleryItem = new Interface('GalleryItem’, ['hide', ‘show’, ‘addTag', 
‘getPhotosWithTag’ ]); 


我 们 在 接口 中 添加 了 三 个 方法 。 其 中 addTag 将 为 用 以 调用 它 的 对 象 及 其 所 有 子 对 象 添 加 一 个 
标签 。getPhotosWithTag 将 返回 一 个 由 具有 特定 标签 的 所 有 图 片 组 成 的 数组 。 对 任何 组 合 对 象 调 
用 getA11Leaves 将 返回 其 所 有 叶 级 后 代 节点 组 成 的 数组 ， 而 对 叶 节 点 调用 这 个 方法 则 返回 一 个 由 
它 自身 组 成 的 数组 。 因 为 addTag 最 简单 ， 所 以 我 们 先 从 它 开始 讲 起 : 

/* DynamicGallery class. */ 


var DynamicGallery = function(id) { // implements Composite, GalleryItem 
this.children = []; 
this.tags = []; 
this.element = document.createElement('div'); 
this.element.id = id; 
this.element.className = 'dynamic-gallery'; 


} 
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DynamicGallery.prototype = { 


addTag: function(tag) { 
this. tags.push( tag) ; 
for(var node, i = 0; node = this.getChild(i); i++) { 
node. addTag(tag) ; 


}, 
}; 
/* GalleryImage class. */ 


var GalleryImage = function(src) { // implements Composite, GalleryItem 
this.element = document.createE lement('img'); 
this.element.className = 'gallery-image'; 
this.element.src = src; 

_ this.tags = []; 

} 

GalleryImage.prototype = { 


addTag: function(tag) { 
this. tags .push( tag); 


h, 


}; 

我 们 在 组 合 对 象 类 和 叶 类 中 都 添加 了 一 个 名 为 tags 的 数组 属性 。 它 保存 着 代表 标签 的 字符 
串 。 在 叶 类 的 addTag 方 法 中 只 需要 把 作为 参数 传 入 的 字符 串 加 入 tags 数 组 中 即 可 。 而 在 组 合 对 象 
类 的 这 个 方法 中 , 除了 这 样 做 之 外 ,还 要 像 任 何其 他 普通 组 合 对 象 方法 那样 把 请 求 在 层次 体系 中 
向 下 传递 。 尽管 把 标签 给 予 一 个 组 合 对 象 实际 上 相当 于 把 该 标签 给 予 其 所 有 子 对 象 , 但 我 们 还 是 

259| ”必须 为 每 一 个 子 对 象 添 加 该 标签 。 这 是 因为 搜索 可 能 会 从 层次 体系 中 的 任何 层次 开始 ， 如 果 没 有 

为 每 一 个 叶 节 点 添加 标签 的 话 , 那么 从 较 低层 次 开始 的 搜索 可 能 会 错过 在 层次 体系 中 的 较 高 层次 
上 分 配 的 标签 。 l 

getpPhotosWithTag 方 法 是 职责 链 发 挥 优化 作用 的 地 方 。 我 们 将 分 别 讲述 每 个 类 中 的 这 个 方法 。 
首先 来 看 组 合 对 象 类 : 


/* DynamicGallery class. */ 
var DynamicGallery = function(id) { // implements Composite, GalleryItem 


}; 
DynamicGallery.prototype = { 


getAllLeaves: function() { 
var leaves = []; 
for(var node, i = 0; node = this.getChild(i); i++) { 
leaves = leaves.concat(node.getAllLeaves()); 
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} 


return leaves; 


}, 
getPhotosWithTag: function(tag) { 
// First search in this object's tags; if the tag is found here, we can stop 
// the search and just return all the leaf nodes. 
for(var i = 0, len = this.tags.length; i < len; i++) { 
if(this.tags[i] === tag) { 
return this.getAllLeaves(); 


} 


// If the tag isn't found in this object's tags, pass the request down 

// the hierarchy. 

for(var results = [], node, i = 0; node = this.getChild(i); i++) { 
results = results.concat(node.getPhotosWithTag(tag) ); 

} 


return results; 


}, 


}; 

这 段 代 码 实际 上 为 DynamicGallery 添 加 了 两 个 方法 ， 不 过 它们 的 关系 很 密切 ， 你 稍 后 便 可 看 
到 。getPhotosWithTag 方 法 是 按 职 责 链 的 风格 实现 的 。 它 首先 要 判断 当前 对 象 是 否 能 处 理 请 求 。 
其 具体 做 法 是 在 当前 对 象 的 tags 数 组 中 检查 指定 的 标签 。 如 果 能 找到 ， 那 就 表明 层次 体系 中 当前 
这 个 组 合 对 象 的 所 有 子 对 象 也 都 具有 这 个 标签 。 此 时 即 可 停止 搜索 , 然后 在 这 个 层次 上 处 理 请 求 。 
如 果 找 不 到 指定 标签 ， 则 将 请 求 传递 给 每 一 个 子 对 象 ， 并 返回 结果 。 

getA11Leaves 方 法 用 于 获取 特定 组 合 对 象 的 所 有 叶 级 后 代 节点 并 将 它们 组 织 为 一 个 数组 返 
回 。 它 是 作为 一 个 普通 的 组 合 对 象 方法 实现 的 ， 也 就 是 说 同样 的 方法 调用 会 被 传递 到 每 一 个 子 
对 象 。 

这 些 方法 在 叶 类 中 的 实现 相当 简单 。 它 们 返回 的 结果 数组 都 只 包含 叶 对 象 自身 (但 
getPhotosWithTag 方 法 在 当前 叶 对 象 的 标签 不 匹配 指定 标签 时 返回 一 个 空 数组 ): 


/* GalleryImage class. */ 


var GalleryImage = function(src) { // implements Composite, GalleryItem 


}; 
GalleryImage.prototype = { 


getAllLeaves: function() { // Just return this. 
return [this]; 


}, 
getPhotosWithTag: function(tag) { 
for(var i = 0, len = this.tags.length; i < len; i++) { 
if(this.tags[i] === tag) { 
return [this]; 
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} 


return []; // Return an empty array if no matches were found. 


}, 


}; 

我 们 来 分 析 一 下 在 本 例 中 使 用 职责 链 有 什么 收获 以 及 组 合 模式 是 如 何 为 此 提供 帮助 的 。 如 果 
把 getPhotosWithTag 作 为 一 个 组 合 对 象 方法 实现 ， 让 它 只 负责 把 方法 调用 传递 给 每 个 子 对 象 ， 那 
么 每 个 子 对 象 又 得 把 自己 的 所 有 标签 逐一 与 所 搜索 的 标签 进行 比较 。 而 我 们 的 做 法 使 用 了 职责 链 
模式 来 确定 是 否 可 以 早 一 点 结束 搜索 。 在 最 差 的 情况 下 ， 最 后 仍然 是 叶 节 点 在 处 理 请 求 , 但 要 是 
某 个 组 合 对 象 节点 具有 那个 标签 的 话 , 那么 请 求 可 能 在 层次 体系 中 往 上 几 个 层次 的 地 方 就 能 得 到 
处 理 。 

不 过 这 些 好 处 并 非 没 有 代价 。 我 们 仍然 需要 获取 在 层次 体系 中 位 于 具有 匹配 标签 的 组 合 对 象 
之 下 的 每 一 个 图 片 对 象 。 这 需要 使 用 getA11Leaves 方 法 ， 它 所 耗费 的 计算 量 比 getPhotosWithTag 
少 得 多 。 我 们 的 办 法 也 适用 于 其 他 组 合 对 象 方法 。 实际 上 , 组 合 对 象 方法 需要 耗费 的 计算 量 越 大 ， 
在 层次 体系 中 较 高 的 层次 上 处 理 请 求 并 使 用 某 种 辅助 方法 〈 比 如 getA11Leaves) 提高 请 求 的 处 理 
效率 所 带 来 的 好 处 也 就 越 大 。 


17.7 职责 链 模式 之 利 


借助 职责 链 模式 ， 可 以 动态 选择 由 哪个 对 象 处 理 请 求 。 这 意味 着 你 可 以 使 用 只 有 在 运行 期 间 
才能 知道 的 条 件 来 把 任务 分 派 给 最 恰当 的 对 象 。 图 片 库 的 例子 已 经 表明 , 这 可 以 比试 图 在 开发 期 
间 静 态 指 定 处 理 请 求 的 对 象 高 效 得 多 。 你 还 可 以 使 用 这 个 模式 消除 发 出 请 求 的 对 象 与 处 理 请 求 的 
对 象 之 间 的 耦合 。 夭 此 你 可 以 在 模块 的 组 织 方面 获得 更 大 的 灵活 性 ， 而 且 在 重 构 和 修改 代码 的 时 
候 不 用 担心 会 把 类 名 固化 在 算法 中 。 

在 已 经 有 现成 的 链 或 层次 体系 的 情况 下 ， 职 责 链 模式 更 加 有 效 。 与 组 合 模式 的 结合 使 用 就 属 
于 这 种 情况 。 你 可 以 重用 组 合 对 象 的 结构 来 传递 请 求 ， 直 到 找到 一 个 可 以 处 理 请 求 的 对 象 。 在 此 
情况 下 ， 不 用 编写 粘 合 性 代码 来 实例 化 那些 对 象 或 建立 链 ， 因 为 那些 东西 早已 准备 妥当 。 夭 此 可 
以 实现 把 请 求 转 给 恰当 的 处 理 程序 的 方法 。 


178 PARAZZI 


由 于 在 职责 链 模 式 中 ， 请 求 与 具体 的 处 理 程序 被 隔离 开 来 ， 因 此 无 法 保证 它 一 定 会 被 处 理 ， 
而 不 是 径直 从 链 尾 离开 。 这 种 模式 使 用 的 接收 者 是 隐 式 的 〈implicit)， 因 此 无 法 得 知 如 果 请 求 能 
够 得 到 处 理 的 话 具体 将 由 哪个 对 象 处 理 它 。 这 个 问题 可 以 通过 创建 一 个 通用 的 “catch-all) 接收 
者 并 将 其 添加 到 所 有 链 的 尾 端 来 解决 ， 但 是 这 个 办 法 很 繁琐 ， 而 且 这 样 一 来 就 失去 了 可 以 随时 在 
链 尾 添 加 新 环节 的 灵活 性 。 

职责 链 与 组 合 对 象 类 的 搭配 使 用 可 能 有 点 令 人 困惑 。 人 们 原本 期 望 ,组合 对 象 节点 完全 可 以 
与 叶 节 点 互 换 使 用 ， 而 且 客户 代码 看 不 出 其 中 的 差别 ， 所 有 方法 调用 都 被 组 合 对 象 往 层 次 体系 的 
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下 层 传递 。 但 职责 链 方法 改变 了 这 个 约定 。 在 引入 职责 链 之 后 ， 有 些 方法 会 在 组 合 对 象 这 里 进行 
处 理 ， 而 不 会 继续 往 下 传 。 要 想 让 这 些 方法 可 以 与 叶 方 法 互 换 ， 其 代码 的 编写 会 很 球 手 。 它 们 的 
效率 很 高 ， 但 为 此 付出 的 代价 是 代码 的 复杂 性 。 


17.9 小结 


本 章 考 察 了 一 种 用 来 隔离 请 求 的 发 送 者 和 接收 者 的 技术 。 职责 链 模式 可 以 用 来 消除 客户 与 处 
理 程序 之 间 的 耦合 ， 并 生成 由 可 以 对 请 求 进行 处 理 的 对 象 组 成 的 链 。 使 用 这 种 模式 ， 你 可 以 编写 
代码 在 运行 期 间 选 择 最 合适 的 对 象 来 作 接收 者 ， 从 而 避免 把 接收 者 绑 定 到 具体 的 类 。 如 果 有 现成 
的 链 或 层次 体系 可 供 利用 ,那么 实现 这 个 模式 只 是 举 手 之 劳 。 组 合 对 象 层 次 体系 就 非常 适合 于 这 
一 任务 ， 而 且 它 自 身 也 会 因为 职责 链 的 引入 而 更 有 效率 。 

这 个 模式 的 正确 设置 和 使 用 都 很 复杂 ， 因 此 只 应 该 用 在 必要 的 地 方 。 此 外 ， 它 还 是 一 种 隐 式 
的 处 理 程序 ， 因 此 无 法 得 知 处 理 请 求 的 具体 是 链 上 的 哪个 环节 。 请 求 有 可 能 根本 不 会 被 处 理 。 但 
是 在 那些 可 以 受益 于 职责 链 模式 的 场合 下 ， 比 如 前 面 为 图 片 添加 标签 那个 例子 中 ， 该 模式 可 以 提 
高 算法 的 效率 并 降低 其 计算 量 。 
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for decorator pattern (用 于 装饰 者 模式 )，163 
defined (定义 )，11 
describing with comments (用 注释 说 明 )，14-15 
drawbacks of using (使 用 接口 的 不 利之 处 )，12 
emulating, in JavaScript (在 JavaScript 中 模仿 )，14-18 
implementation for book 〈 本 书 中 使 用 的 Interface 实 现 )， 
18 
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importance of (其 重要 性 )，11 
in Java (Java 中 的 )，13 
patterns relying on〔 依 赖 于 接口 的 模式 )，23 
in PHP (PHP 中 的 )，13-14 
role of, in information hiding (在 信息 隐藏 中 的 角色 )， 
26 
intrinsic data 〈 内 在 数据 )，179 
intrinsic state 〔( 内 在 状态 )，180-181 
introspection (内 省 )，9 
invoker class〔( 调 用 者 类 )，232 
invoking objects, in command pattern (调用 者 ， 命 令 模式 中 
的 )，227-230 
IS-A relationships (IS-A (为 一 ) 关系 )，128 
isHighLatency method (isHighLatency 方 法 )，104 
_isInitialized method (_isInitialized 方 法 )，211-212 
isOffline method (isOffline 方 法 )，104 


J 


JavaScript 
design patterns (设计 模式 )，9-10 
emulating interfaces in 〈 在 其 中 模仿 接口 )，14-18 
encapsulation in 〈 其 中 的 封装 )，40 
event listeners and〈 事 件 监听 器 与 )，142 
features of (其 特性 )，3-9 
flexibility of (其 灵活 性 )，3-6，210 
functions in (其 中 的 函数 )，6-8 
inheritance in( 其 中 的 继承 )，9 
lack of interface support in( 其 中 缺乏 对 接口 的 支持 )， 
12 
as loosely typed language〔 作 为 一 种 弱 类 型 语言 )，6 
objects in〈( 其 中 的 对 象 )，8-9 
JavaScript libraries (JavaScript 库 ) 
chainable〔 支 持 方法 链 式 调用 的 )，86-88 
common features of (其 常见 特性 )，86 
facades and (门面 与 ;141-142 
using adapter pattern with 〈 使 用 适配器 模式 )，150-152 
JavaScript objects, as wrappers for HTML elements 
(JavaScript 对 象 ， 作 为 HTML 元 素 的 包装 器 )，136-139 


3 

large projects, use of interfaces in 〈 大 型 项 目 ， 在 其 中 使 用 
接口 )，20 

lazy loading 〈 惰 性 加 载 )，75-78，82，223 

leaf elements 〈 叶 元 素 )，127-128，131 

libraries 〈 库 ) 参见 JavaScript libraries 
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ListBuilder class (ListBuilder 类 )，174-176 
logging commands 〈 用 命令 日 志 记录 命令 )，239-241 
command pattern and (命令 模式 与 )，235-242 
for crash recovery 〈 用 于 崩溃 恢复 )，242 
for implementing undo on nonreversible actions (用 于 实 
ELAS FY PRE ERI), 239-242 
loosely coupled code (HARR A RIARI), 234 
loosely coupled modules (FAME MBER), 39 
loosely coupled objects (FARR E HIR), 41, 107, 139 
loosely typed variables 〈 弱 类 型 变量 )，6 


maintenance, flyweight pattern and〈 维 护 ， 享 元 模式 与 )， 
194 

manager, creating to store extrinsic data 〈 管 理 器 ， 为 保存 外 
在 数据 而 创建 )，193 

memoizing, 101 

method profiling, using decorator pattern 《方法 性 能 分 析 ， 
使 用 装饰 者 模式 )，173-176 

methods (方法 ) 
adding behavior after〔 在 方法 后 添加 行为 )，164 
adding behavior before〔 在 方法 前 添加 行为 )，165 
adding new〔 添 加 新 方法 )，167-169 
chaining 〈 链 式 调 用 )，83-90 
mutator〈 赋 值 器 )，29-30 
private ( 私 用 方法 )，25，37，39，204 
privileged (特权 方法 )，34，110 
public( 公 用 方法 )，34 
replacing (替换 )，166-167 
static〈 静 态 的 )，35-37，75 
参见 各 种 具体 方法 

mixin classes (#7628), 50-51, 59-62 

modular user interfaces, using command pattern 〈 模 块 化 用 
户 界面 ， 使 用 命令 模式 )，230-235 

mutable objects( 易 变 对 象 )，8-9 

mutator methods 〈 赋 值 器 方法 )，29-30 


namespaces, singletons and (命名 空间 ， 单 体 与 )，65-68， 
81 

naming conventions, emulating private members using (命名 
规范 ， 用 以 模仿 私 用 成 员 )，30-32 

nested functions (K&R), 32-33, 36 

new keyword (new 关 键 字 )，42，99 

new operator (new 运 算 符 )，42，57 
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nonreversible actions, implementing undo with (不 可 逆 操 
作 ， 实 现 其 取消 )，239-242 


O 


object factories (对 象 工厂 )，38 
object literals, singletons and 〈 对 象 字面 量 ， 单 体 与 )，66， 
72 
objects (对 象 ) 
adding functionality to, with decorator pattern (用 装饰 者 
模式 为 其 增添 功能 )，159-163 
in chain of responsibility pattern 〈 职 责 链 模式 中 的 )， 
249-251 
cloned (克隆 的 )，48-49 
converting to flyweights (转化 为 享 元 )，185 
encapsulation of multiple into one large( 将 多 个 封装 为 一 
个 大 的 )，99 
fully exposed (门户 大 开 型 )，27-30 
intrinsic vs, extrinsic state ( 内 在 状态 与 外 在 状态 的 比 
较 )，180-181 
invoking in command patter 〈 在 命令 模式 中 调用 )， 
227-230 
loosely coupled (HRA MI), 41, 107, 139 
mutability of (其 易 变性 )，8-9 
observable〈 可 观察 的 )，217，223 
patterns for (用 于 对 象 的 模式 )，26-39 
prototype (原型 )，45-49，57-58 
receiver〔 接 收 者 )，227-230，245，262 
reducing required number oft 削减 所 需 对 象 的 数量 ), 179 
request (请求 )，251-254 
sender〔 发 送 者 )，245 
static members (静态 成 员 )，35-37 
using naming conventions 《使 用 命名 规范 )，30-32 
wrapper (包装 器 )，149 
参见 各 种 具体 类 型 
observable objects 〈 可 观察 对 象 )，217，223 
observed role 〈 被 观察 的 角色 )，215-218 
observer pattern (观察 者 模式 ) 
animation (example) 【动画 (示例 ))，221 
benefits of (之 利 )，223 
building observer API (构建 观察 者 API)，218-220 
delivery methods in (其 中 的 投 送 方法 )，216，219 
drawbacks of (2.9K), 223 
event listeners 〈 事 件 监听 器 )，222 
implementation of (其 实现 )，216-218 
introduction to 〔 介 绍 )，215 


publishers in (其 中 的 发 布 者 )，215:218 
for request queue (用 于 请 求 队列 )，114 
subscribe method (subscribe 方 法 )，219-220 
subscribers in 《〈 其 中 的 订阅 者 )，215-218 
unsubscribe method (unsubscribe 方 法 )，220 
uses of (应 用 )，220，223 

observer role (观察 者 角色 )，215-218 

optimization (优化 ) 
with chain of responsibility pattern 〈 使 用 职责 链 模式 )， 

258-261 

with flyweight pattern 〈 使 用 享 元 模式 )，179-192 
with proxy pattern 〈 使 用 代理 模式 )，213 


P 


page-specific code, singleton as wrapper for (专用 于 特定 网 
页 的 代码 ， 单 体 用 作 其 包装 器 )，68-70 
parentheses, empty 〈 空 括号 )，36 
patterns (模式)，9-10 
adapter (适配器 模式 )，149-158 
bridge (桥接 模式 )，109-123 
chain of responsibility 〔〈 职 责 链 模式 )，245-262 
closure( 闭 包 )，33-35 
command (AHR), 23, 225-244 
composite (HHAH), 23, 125-140 
constants (常量 )，37-38 
for creating objects 〈 用 于 创建 对 象 的 )，26-39 
decorator〔 装 饰 者 模式 )，23，159-177 
facade (门面 模式 )，141-148 
factory (工厂 模式 )，23，38，93-108 
flyweight CETHA), 179-195 
fully exposed object (门户 大 开 型 对 象 )，27，29-30 
observer (MAHL), 215-223 
private members using naming convention (用 命名 规范 
区 别 私 用 成 员 )，30-32 
proxy 〈 代 理 模式 )，197-214 
relying on interfaces (对 接口 的 依赖 )，23 
singleton ( 单 体 模式 )，38，65-82 
static methods and attributes (静态 方法 和 属性 )，35-37 
performance issues〔 性 能 问题 )，12，204 
PHP, interfaces in (PHP， 其 中 的 接口 )，13-14 
pooling technique 〈 对 象 池 技术 )，193 
primitive types (原始 类 型 )，37 
private attributes ( 私 用 属性 )，25 
scope and (作用 域 与 )，32-33 
through closures (用 闭 包 实现 )，33-35 
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private code, bridge between public code and 〈 私 用 的 代码 ， 
它 与 公开 的 代码 之 间 的 桥接 元 素 )，110 
private keyword (private 关 键 字 )，26 
private members (WARR) 
emulating, using naming conventions 《用 命名 规范 模 
仿 )，30-32 
singleton with 〈 带 私 用 成 员 的 单 体 )，70-75 
syntax for (其 语法 )，75 
through closures (用 闭 包 创建 )，33-35 
private methods〔( 私 用 方法 )，25，37，39,，204 
privileged functions (特权 函数 )，110 
privileged methods (特权 方法 )，34，110 
programming styles (编程 风格 )，3 
protection proxies (保护 代理 )，200 
prototypal inheritance (原型 式 继承 )，41，45-49 
vs. classical 〈 与 类 式 继承 的 比较 )，49 
edit-in-place field using 〈 使 用 原型 式 继 承 的 就 地 编辑 
域 )，55-58 
use of (应 用 )，62 
prototype attribute (prototype 属 性 )，46-48 
prototype chaining (原型 链接 )，42-43，46-48 
prototype method (在 prototype 中 定义 方法 )，137 
prototype objects (原型 对 象 )，45-49，57-58 
proxy objects/pattern 〈 代 理 对 象 /模式 ) 
access control to real subject by (用 以 控制 对 本 体 的 访 
问 )，197-200 
benefits of (之 利 )，213 
vs. decorator pattern 〈 与 装饰 者 模式 的 比较 )，201 
directory lookup (example) (目录 查找 (示例 )), 206-210 
drawbacks of (2), 213-214 
function of (功能 )，197 
general, for virtual proxy〈 用 于 虚拟 代理 的 通用 模式 )， 
210-213 
introduction to (t4), 197 
page statistics (example) 【网 页 统计 〈 示 例 ))，201-204 
protection〔 保 护 代 理 )，200 
remote《〈 远 程 代 理 )，200-204，213 
structure of (其 结构 )，197-201 
use of (应 用 )，201 
virtual (虚拟 代理 )，199-201，206-213 
for wrapping web services( 用 于 包装 Web 服 务 ), 201-206 
PS2 slot (PS2 插 口 )，150 
PS2-to-USB adapter (PS2-to-USB 适 配器 )，150 
public code, bridge between private code and (公开 的 代码 ， 
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它 与 私 用 的 代码 之 间 的 桥接 元 素 )，110 

public members (公用 成 员 )，37，75 

public methods (公用 方法 )，34，204 

publisher-subscriber pattern (发 布 者 -订阅 者 模式 ) 参见 
observer pattern 

publishers (发 布 者 )，215-218 

pull delivery environment(“ 拉 ” 投 送 环境 )，216 

push delivery environment (“ 推 ” 投 送 环境 )，216 


Q 
queuing system 〈 队 列 化 系统 )，111-122 


real subjects (本 体 )，197-200，212-214 
receiver classes (接收 者 类 )，230 
receiving objects (接收 者 )，227-230，245，262 
refactoring〔( 重 构 )，262 
reflection (反射 )，9 
reliability issues, with remote proxy (可 靠 性 问题 ， 远 程 代 
理 的 )，213 
remote proxies (远程 代理 )，200 
benefits of (之 利 )，213 
drawbacks of (2.9%), 213 
performance issues with (其 性 能 问题 )，204 
use of (应 用 )，201 
for wrapping web service (用 于 包装 Web 服 务 )，201-204 
renderResults method (renderResults 方 法 )，22 
request handling, chain of responsibility model and (请 求 的 
处 理 ， 职 责 链 模式 与 )，261 
request method (request 方 法 )，102-103 
request objects 〈 请 求 对 象 )，251-254 
request queue (请 求 队列 )，111-122 
ResultFormatter class (ResultFormatter 类 )，21-22 
reusability (可 重用 性 )，11,，39，50-51 
RSS reader, using factory pattern RSS 阅读 器 ,使 用 工厂 模 
式 )，104-107 


save function (save 函 数 )，128，130-131 

scope《 作 用 域 )，32-33，39 

Sellsian approach (Sells 方 法 )，216-217 

sender objects (发送 者 对 象 )，245 

serialize method (serialize 方 法 )，50 

setup costs, combining using factory patten 《设置 开销 ， 通 
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过 工厂 模式 节约 )，99 
shortcut icons (快捷 方式 图 标 )，141 
SimpleHandler class (SimpleHandler 类 )，101 
singleton pattern 〈 单 体 模式 )，38，66 
basic structure of (其 基本 结构 )，65-66 
benefits of (之 利 )，81 
branching (分 支 )，78-81 
drawbacks of (2 4) 82 
introduction to (4r#4), 65 
lazy loading 〈 惰 性 加 载 )，75-78，82 
namespacing〈 划 分 命名 空间 )，66-68 
with private members 〈 含 私 用 成 员 的 )，70-75 
uses of (应 用 )，65，81 | 
as wrapper for page-specific code (用 作 专 用 于 特定 网 页 
的 代码 的 包装 器 )，68-70 
static attributes (静态 属性 ) 35-37 
static methods (静态 方法 )，35-37，75 
strict type checking (严格 的 类 型 检查 )，12，18 
subclasses (FÆ), 35, 212-213 
subscribe method (subscribe 773), 219-220 
subscribers (iJ BU #7), 215-218 
successors ( FÆ), 249 
superclasses (WH), 35, 44-45 


T 


test-driven development (TDD)〔 测 试 驱动 的 开发 )，216 

testing, interfaces and (接口 与 测试 )，12 

this keyword 〈this 关 键 字 )，27，34，36-37，42，72，233 

tooltip objects, with flyweight pattern (工具 提示 对 人 象 , 使 用 
享 元 模式 )，186-190 

type checking (类 型 检查 )，12，18，20 


U 


underscore notation (下 划 线 表示 法 )，32，70-71，74 
undo buttons (取消 按钮 )，237-239 


undo method (undo 方 法 )，235，237-242 

UndoButton class (UndoButton 类 )，239 

UndoDecorator class (UndoDecorator 类 )，239 

unsubscribe method (unsubscribe 方 法 )，220 

USB system USB 系统 )，150 

user interfaces, with command pattern (用 户 界面 ， 使 用 命 
令 模 式 )，225-226，230-235 


V 


validate function (validate 函 数 )，127-128 
var keyword (var 关 键 字 )，36，67，75 
variables (变量 ) 
closures for〈 把 闭 包 用 于 )，33-35 
constants〈 常 量 )，37-38 
singleton 〔 单 体 )，66 
virtual proxies〈 走 拟 代理 ) , 199-200 
benefits of (之 利 )，213 
directory lookup (example) ( 目录 查找 (示例 ))，206-210 
drawbacks of (2.9%), 213 
general pattern for creating (用 于 创建 虚拟 代理 的 通用 模 
式 )，210-213 
use of (应 用 )，201 


W 


web services 《Web 服 务 ) 
defining interface for (为 其 定义 接口 )，203-204 
proxy pattern for〈 代 理 模 式 用 于 )，201-206 

webmail API, using adapter pattern with (Web 邮 件 API， 使 
用 适配器 模式 )，152-158 


X 


XHR objects (XHR 对 象 )，99-101 
XHR requests (XHR 请 求 )，208，213 
XMLHttpRequest object (XMLHttpRequest 对 象 )，100, 156 
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计算 机 精品 学 习 资料 大 放送 
软考 官方 指定 教材 及 同步 辅导 书 下 载 | 软考 历年 真是 解析 与 答案 
软考 视频 | 考试 机 构 | 考试 时 间 安 排 
Java 一 览 无 余 : Java 视频 教程 | Java SE | Java EE 
Net 技术 精品 资料 下 载 汇 总 : ASP.NET 篇 
Net 技术 精品 资料 下 载 汇 总 : C# 语 言 
.Net 技术 精品 资料 下 载 汇 总 : VB.NET 篇 
撼 世 出 击 : C/C++ 编程 语言 学 习 资料 尽 收 眼底 电子 书 + 视 频 教 程 
Visual C++(VC/MFC) 学 习 电 子 书 及 开发 工具 下 载 
Perl/CGI 脚本 语言 编程 学 习 资源 下 载 地 址 大 全 
Python 语言 编程 学 习 资料 (电子 书 二 视频 教程 ) 下 载 汇 总 
最 新 最 全 Ruby, Ruby on Rails 精品 电子 书 等 学 习 资 料 下 载 
数据 库 精 品 学 习 资源 汇总 ，MySQL 篇 | SQL Server 篇 | Oracle 篇 
最 强 HTML/xHTML、CSS 精品 学 习 资料 下 载 汇总 
最 新 JavaScript, Ajax 典藏 级 学 习 资 料 下 载 分 类 汇总 
网 络 最 强 PHP 开发 工具 + 电子 书 + 视 频 教程 等 资料 下 载 汇 总 
UML 学 习 电子 资 下 载 汇总 软件 设计 与 开发 人 员 必 备 
经 典 LinuxCBT 视频 教程 系列 Linux 快速 学 习 视 频 教程 一 帖 通 
天 罗 地 网 :精品 Linux 学 习 资 料 大 收集 (电子 书 + 视 频 教 程 ) Linux 参考 资源 大 系 
Linux 系统 管理 员 必 备 参考 资料 下 载 汇总 
Linux shell、 内 核 及 系统 编程 精品 资料 下 载 汇 总 
UNIX 操作 系统 精品 学 习 资 料 < 电子 书 + 视 频 > 分 类 总 汇 
FreeBSD/OpenBSD/NetBSD 精品 学 习 资源 索引 含 书籍 十 视频 
Solaris/OpenSolaris 电子 书 、 视 频 等 精华 资料 下 载 索 引 
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“本 书 道 前 人 所 未 道 ， 引 导 你 从 编写 代码 进化 为 设计 代码 。 书 中 绝 大 部 分 示例 代码 都 来 自 YUI 等 实战 项 目 ， 
并 进行 了 深入 剖析 。 强 烈 推 荐 。” 
一 一 Nicholas C. Zakas， 著 名 JavaScript 专 家 ，Yahoo 前 端 工程 师 ， 畅 销 书 《JavaScript 高 级 程序 设计 》 作 者 


“ 毫 不 夸张 地 说 ， 这 是 我 有 生 以 来 读 到 的 最 好 的 一 本 JavaScript 图 书 。 作 者 讲授 了 大 量 独门 的 专家 经 验 。” 
一 一 Mostafa Farghaly， 埃 及 程序 员 


Pro JavaScript Design Patterns 


J avaScript 设 计 模 式 


Web 应 用 取代 桌面 程序 的 时 代 已 经 到 来 ! 作为 Web 前 端的 核心 技术 ，JavaScript 的 重要 性 不 言 而 喻 ， 它 有 天 
成 为 下 一 代 统 治 性 程序 语言 。 但 由 于 业界 长 期 的 误解 和 混用， 也 有 不 少 人 仍然 对 此 半信半疑 。 那 么 ，JavaScript 
到 底 能 和 否 当 此 大 任 呢 ? 

本 书 中 ，Google 和 Yahoo 公 司 的 两 位 资深 Web 专 家 对 此 给 出 了 掷地有声 的 肯定 回答 。 作 者 针对 常见 的 开发 任 
务 ， 从 YUI 等 实战 代码 中 取材 ， 提 供 了 专家 级 的 解决 方案 ， 不 仅 透 彻 剖 析 了 JavaScript 中 的 面向 对 象 编程 ， 而 且 
深入 探讨 了 如 何 用 JavaScript 实 现 以 前 只 在 服务 器 端 应 用 的 设计 模式 ， 如 何 根据 实际 场景 选择 恰当 的 设计 模式 ， 
开发 出 高 质量 的 企业 级 代码 。 本 书 充分 证 明 : JavaScript 不 仅 毫 不 逊色 于 其 他 高 级 语言 ， 已 经 是 一 种 成 熟 且 强大 
的 面向 对 象 语 言 ， 而 且 还 拥有 Java 和 C++ 等 语言 不 具备 的 面向 未 来 的 特性 ， 因 此 更 加 灵活 、 更 富 于 表现 力 。 

无 论 是 前 端 工程 师 ， 还 是 服务 器 端 程序 员 ， 通 过 本 书 都 将 使 自己 的 JavaScript 功 力 提升 到 前 所 未 有 的 高 度 。 





Ross Harmes 资深 Web 程 序 员 ， 有 10 多 年 编程 经 验 。 现 任 Yahoo 前 端 工程 师 。 他 是 开源 图 片 博客 
软件 Birch 的 开发 者 。Blog 地 址 为 http:/ftechfoolery.com。 


Dustin Diaz 资深 Web 程 序 员 ， 现 任 Google 用 户 界面 工程 师 。 新 一 代 JavaScript 框 架 DEDIChain ( $A 
jQuery 和 YUI 的 优势 ) 的 开发 者 。 他 还 是 一 位 中 长 跑 健 将 ，800 米 跑 曾 经 在 全 美国 排名 第 13。 拥 有 西班牙 
语 学 士 学 位 。 个 人 网 站 httpVdustindiaz.com。 
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